转自https://www.w3cplus.com/vue/vue-instances-and-life-cycles.html

Vue实例虽然没有完全遵循MVVM模型,但Vue的设计无疑受到了它的启发。

  • View:是看得到的,即视图,用到Vue的项目中来,它应该是“模板”。也就是用来挂载Vue实例的一个DOM元素,通常在项目根目录中index.html文件中出现,比如<div id="app"></div>
  • Model:即模型(或数据),跟MVC中的Model一样,就是想要显示到模型上的数据,也是我们需要在程序生命周期中可能需要更新数据
  • ViewModel:Vue实例将View和Model连接起来的桥梁
  • Vue代码中el:'#app'牵着Viewdata: {}牵着Model,而类似methods充当一个控制者(Controller)的角色,可以修改Model的值。
  • Vue实例属性和方法有很多:

注,上图来自于@老马自嘲的《Vue入门系列之Vue实例详解与生命周期》一文。

Vue提供的可以注册的钩子都在上图中红色框标注。他们是:

  • beforeCreate:在实例初始化之后,数据观测(Data Observer)和event/watcher事件配置之前被调用
  • create:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据(Data Observer)、属性和方法的运算,watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见
  • beforeMount:在挂载开始之前被调用:相关的render函数首次被调用
  • mountedel被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。如果root实例挂载了一个文档内元素,当mounted被调用时vm.$el也在文档内
  • beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态,这不会触发附加的重渲染过程
  • updated:由于数据更改导致虚拟DOM重新渲染和打补丁,在这之后会调用该钩子。当这个钩子被调用时,组件DOM已经更新,所以你现在可以执行依赖于DOM的操作。然而在大多数情况下,你应该避免在此期间更改状态,因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用
  • beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用
  • destroyed:Vue实例销毁后调用。调用后,Vue实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用
  • 来看一个生命周期的简单示例:

    let app = new Vue({
    el: '#app',
    data() {
    return {
    name: '大漠'
    }
    },
    beforeCreate: function () {
    console.log('===== 创建前 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    created: function () {
    // 在实例创建之后同步调用
    // 此时实例已结束解析选项
    // 这意味着已建立:数据绑定,计算属性,方法,watcher/事件回调
    // 但是还没有开始DOM编译,$el还不存在,但是实例存在,即this.name存在,可以打印出来
    console.log('===== 已创建 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    beforeCompile: function () {
    console.log('===== 未开始编译 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    compiled: function () {
    // 在编译结束之后调用
    // 此时所有的指令已生效,因而数据的变化将触发DOM更新
    // 但是不担保$el已插入文档
    console.log('===== 编译完成 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    beforeMount: function () {
    console.log('===== Mount之前 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    mounted: function () {
    console.log('===== Mount完成 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    beforeUpdate: function () {
    console.log('===== 更新前 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    updated: function () {
    console.log('===== 更新完成 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    ready: function () {
    // 在编译结束和$el 第一次插入文档之后调用,如果在第一次attached钩子之后调用
    // 注意,必须是由Vue插入,比如 vm.$appendTo()等方法或指令更新,才会触发ready 钩子
    console.log('===== 一切都准备好了 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    attached: function () {
    // app.$appendTo('#app2')暂时触发不了,不知道怎么解决
    // 在 vm.$el插入DOM时调用。必须是由指令或实例方法,比如$appendTo()插入,直接操作vm.$el不会触发这个钩子
    console.log('===== 插入DOM成功 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    detached: function () {
    // 触发事件 app.$destroy(true),其中参数true控制是否删除DOM节点或者app.$remove()
    // 在vm.$el 从DOM中删除时调用。必须是由指令或实例方法删除,直接操作vm.$el不会触发这个钩子
    console.log('===== 删除DOM成功 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    beforeDestroy: function () {
    // 触发方式,在console里面打印app.$destroy()
    // 在开始销毁实例时调用。此时实例仍然有功能
    console.log('===== 销毁前 =====')
    console.log(this.name)
    console.log(this.$el)
    },
    destroyed: function () {
    // 触发方式,在console里面打app.$destroy()
    // 其中app.$destroy(true)是删除DOM节点,会触发detached函数,但是实例仍然存在
    // 在实例被销毁之后调用。此时所有的绑定和实例的指令已经解绑
    // 注意是解绑不是销毁,所有的子实例也已经被销毁
    console.log('===== 已销毁 =====')
    console.log(this.name)
    console.log(this.$el)
    }
    })

      

    打印出来的结果:

    接着在控制台修改data的值,更新视图:

    这个时候触发beforeUpdataupdated。接着执行app.$destroy()

    总结一下,对官方文档的那张图简化一下,就得到了这张图:

注:上图来自@浅白的《Vue生命周期》一文。示例也参考此文。

Vue生命周期学习的更多相关文章

  1. Vue生命周期学习总结

    官方文档上关于Vue生命周期的图片大家一定很熟悉: 1.beforeCreate 实例.组件通过new Vue() 创建出来之后会初始化事件和生命周期,然后就会执行beforeCreate钩子函数,这 ...

  2. vue生命周期-学习心得

    每个Vue实例在被创建之前都要经过一系列的初始化过程,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.销毁等一系列过程,这个过程就是vue的生命周期. 1 vue生命周期图 {: ...

  3. vue生命周期学习(watch跟computed)

    1.watch钩子函数监听数据的变化 watch 的一个特点是,最初绑定的时候是不会执行的,要等到 firstName 改变时才执行监听计算. <div> <p>FullNam ...

  4. 学习vue生命周期

    首先,每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期.首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉: 可以看到在vue一整个的生命周期中会有很多钩子函 ...

  5. 关于vue生命周期

    官网给出的实例的生命周期图如下: beforeCreate(页面创建前),created(页面创建后),beforeMount(页面载入前),mounted(页面载入后),beforeUpdate(页 ...

  6. 面试题之(vue生命周期)

    在面试的时候,vue生命周期被考察的很频繁. 什么是vue生命周期呢? Vue实例有一个完整的生命周期,也就是从开始创建.初始化数据.编译模板.挂载Dom.渲染→更新→渲染.卸载等一系列过程,我们称这 ...

  7. vue生命周期钩子

    转载自:https://segmentfault.com/a/1190000008010666?utm_source=tag-newest https://segmentfault.com/a/119 ...

  8. Vue生命周期 以及应用场景

    首先一张官方图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...

  9. 14、前端知识点--Vue生命周期浅析

    vue生命周期 每个Vue实例或组件从创建到显示再到废弃的过程就是vue的生命周期.很多时候我们希望能在这个过程中执行一些操作,于是就有了生命周期钩子. 生命周期钩子函数允许我们在实例不同阶段执行各种 ...

随机推荐

  1. E - More is better (并查集)

    点击打开链接 Mr Wang wants some boys to help him with a project. Because the project is rather complex, th ...

  2. 查域名对应的ip的命令:Nslookup

    使用Nslookup命令可查询域名对应的ip,如下所示

  3. ZooKeeper学习2---ZooKeeper安装配置

    一.Zookeeper的搭建方式 Zookeeper安装方式有三种,单机模式和集群模式以及伪集群模式. ■ 单机模式:Zookeeper只运行在一台服务器上,适合测试环境:■ 伪集群模式:就是在一台物 ...

  4. mybatis常用默认配置

    设置参数 描述 有效值 默认值 cacheEnable 该配置影响所有映射器中配置的缓存全局开关 true.false true lazyLoadingEnable 延迟加载的全局开关.当它开启时,所 ...

  5. 一次完整的http请求全程

    当我们在打开浏览器的时候,在地址栏输入诸如 http://www.baidu.com时,几秒后浏览器打开百度页面,几秒钟内到底发生了哪些事情. 一.解析URL: 浏览器首先会对输入的URL进行检查,如 ...

  6. leetcode-31-下一个排列

    本题目在凌应标老师的<算法设计与分析>第八次作业中出现,可供参考. 题目描述: 实现获取下一个排列的函数,算法需要将给定数字序列重新排列成字典序中下一个更大的排列. 如果不存在下一个更大的 ...

  7. Description &&debugDescription && runtime(debug模式下调试model)

    description 在开发过程中, 往往会有很多的model来装载属性. 而在开发期间经常会进行调试查看model里的属性值是否正确. 那么问题来了, 在objective-c里使用NSLog(& ...

  8. web环境中的spring MVC

    1. web.xml文件的简单详解 在web环境中, spring MVC是建立在IOC容器的基础上,要了解spring mvc,首先要了解Spring IOC容器是如何在web环境中被载入并起作用的 ...

  9. 等价类计数问题(Polya定理和burnside引理)

    零.约定: (置换等名词会在前置知识中有解释) \(1.\)在本文中,题目要求的染色方案等统称为"元素". \(2.\)两个元素严格相等我们记做"\(=\)", ...

  10. 【软件】chrome设置默认字体

    安装stylish插件 新建样式,加入代码 * { font-family: "Microsoft YaHei", "微软雅黑" !important; }