vue实例的生命周期和生命周期钩子

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期。生命周期钩子就是生命周期事件的别名（生命周期钩子 = 生命周期函数 = 生命周期事件）

生命周期图示

主要的生命周期函数分类

• 创建期间的生命周期函数：

   beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
  
   created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始 编译模板
  
   beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
  
   mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示

• 运行期间的生命周期函数：

   beforeUpdate：状态更新之前执行此函数， 此时 data 中的状态值是最新的，但是界面上显示的 数据还是旧的，因为此时还没有开始重新渲染DOM节点
  
   updated：实例更新完毕之后调用此函数，此时 data 中的状态值 和 界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！

• 销毁期间的生命周期函数：

  beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
  
  destroyed：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  

生命周期深入研究

看了上面的图和函数分类，想必大家对生命周期有了初步了解，为了更加详细演示生命周期钩子执行顺序，接下来结合代码去看看

  
  
  



  
{{message}}

1）create 和 mounted 相关
咱们在chrome浏览器里打开，F12看console就能发现

beforecreated：el 和 data 并未初始化
created:完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化
mounted ：完成挂载

另外在标红处，我们能发现el还是 {{message}}，这里就是应用的 Virtual DOM（虚拟Dom）技术，先把坑占住了。到后面mounted挂载的时候再把值渲染进去。

2）update 相关
这里我们在 chrome console里执行以下命令

app.message= 'say hello';

下面就能看到data里的值被修改后，将会触发update的操作

3）destroy 相关
在console里执行下命令对 vue实例进行销毁。销毁完成后，我们再重新改变message的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。

app.$destroy();

参考文献：https://segmentfault.com/a/11...