Vue生命周期详解学习笔记

生命周期

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

钩子函数

钩子函数用来描述Vue实例从创建到销毁整个生命周期。

八大钩子数分别是：

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进入渲染函数

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

根据报错的提示,一个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事件不是自定义事件所以销毁后还是存在的

总结

常用的生命周期钩子：

1. mounted，发送ajax请求，启动定时器，绑定自定义事件，订阅消息等【初始化操作】。
2. beforeDestroy：清除定时器，解绑自定义事件、取消订阅消息等【收尾工作】。

关于销毁Vue实例

1. 销毁后借助Vue开发者工具看不到任何信息。
2. 销毁后自定义事件会失效，但原生DOM事件依然有效。
3. 一般不会再beforeDestroy操作数据，因为即使操作数据，也不会再触发更新流程了。