Vue生命周期详解学习笔记-Toy模板网

这篇具有很好参考价值的文章主要介绍了Vue生命周期详解学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

生命周期

生命周期又名生命周期回调函数，生命周期函数，生命周期钩子。
生命周期是Vue在关键时刻帮我们调用的一些特殊名称的函数。
生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。
生命周期中的this指向vm或组件实例对象。

钩子函数

钩子函数用来描述Vue实例从创建到销毁整个生命周期。
Vue生命周期详解学习笔记,vue.js,学习,笔记

八大钩子数分别是：

beforeCreate,created,beforeMount,mounted（挂载）,beforeUpdate,updated（更新）,beforeDestory,destoryed（销毁）

实例创建

            beforeCreate() {
                console.log('beforeCreate')
                console.log(this);//vm

            },
            created() {
                console.log('created')
            },

beforeCreate前的init：初始化：生命周期、事件，但数据代理还未开始
data:{n:1},vm._data和vm.n都不存在。

beforeCreate：此时，无法通过vm访问到data中的数据、methods中的方法。

 beforeCreate() {
              console.log('beforeCreate')
              console.log(this);//vm
              debugger;//只分析到这里代码停到这里
          },

beforeCreate之后的init：数据监测，数据代理。
created：此时，可以通过vm访问到data中的数据，methods中配置的方法。

页面挂载

 beforeMount() {
                console.log('beforeMount');
                console.log(this);//vm
                // debugger;//只分析到这里代码停到这里

            },
            // vue完成模板的解析并把初始的真实DOM元素放入页面后（挂载完毕）调用mounted
            mounted() {
                console.log('mounted', this.$el instanceof HTMLElement)//mounted 是真实dom
            },

下一阶段，Vue开始解析模板，生成虚拟DOM（内存中），页面还不能显示解析好的内容。
有el选项，无template选项，解析el的外部html做为模板,检测div是否属于模板，可以给div绑定:x=“n”，可以通过查看是否解析来看。

无el选项，当vm.$mounted(el)被调用，检测是否有template选项，进入下一步。
有el选项，有template选项，解析template进入渲染函数
Vue生命周期详解学习笔记,vue.js,学习,笔记

将html内容放入单引号不换行不报错，或者换行将单引号换成反引号，就不会报错。

Vue生命周期详解学习笔记,vue.js,学习,笔记

根据报错的提示,一个template只能有一个根元素，所以需要将内容用div包裹.这样就不报错了，但是这样的话div的root类名就不存在了。

beforeMount页面呈现的是未经Vue编译的DOM结构；所有对DOM的操作，最终都不奏效。
```
beforeMount() {
              console.log('beforeMount');
              console.log(this);//vm
              debugger;//只分析到这里代码停到这里
          },
```
如果没有debugger断点,控制台都不会显示操作DOM的结果。
将内存中的虚拟DOM转为真实DOM插入页面（将vm$el替换el）
mounted：此时页面中呈现的是经过Vue编译的DOM，对Dom操作均有效（尽可能避免）。至此初始化过程结束，一般在此进行：开启定时器、发送网络请求、订阅消息、绑定自定义事件、等初始化操作。

数据更新

beforeUpdate() {
                console.log('beforeUpdate')
                console.log(this.n)
                // debugger;
            },
            updated() {
                console.log('updated')
                console.log(this.n)
                // debugger;
            },

mounted挂载后，当数据发生改变会先调用beforeUpdate,此时，数据是新的，页面是旧的。页面尚未和数据保持同步。根据新数据，生成新的虚拟DOM，随后与旧的虚拟DOM进行比较，最终完成页面更新，即：完成了Model->View的更新，更新完后，页面和数据保持同步，数据是新的，页面也是新的。

实例销毁

            beforeDestroy() {
                console.log('beforeDestroy')
            },
            destroyed() {
                console.log('destroyed')
            },

当vm.$destroy()调用时，beforeDestroy:此时，vm中所有的：data、methods、指令等等，都处于可用状态，马上要执行销毁过程，一般在此阶段：关闭定时器，取消订阅消息，解绑自定义事件等收尾操作。
vm.$destroy()完全销毁一个实例，清理它与其它组件实例的连接，解绑它的全部指令及事件监听器（自定义事件）。

console.log是原生的do事件不是自定义事件所以销毁后还是存在的文章来源地址https://www.toymoban.com/news/detail-571501.html