vue学习第三天

vue的生命周期钩子

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称为Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
以下为vue生命周期图

vue生命周期可以分为四个大阶段分别为

创建阶段

创建的标志点是New vue()，beforeCreate和created都发生在创建动作之后，但区别在于beforeCreate触发的时候
数据还没初始化和绑定，而created的时候就生成好了，

![在

挂载阶段

beforeMount和mounted两者主要区别在于模板是否编译和挂载了
①el是用来告诉实例在那个元素上进行挂载。
②beforeMount触发的时候el已经初始化了，但是只是占了坑，挂上了编译前的模板，即虚拟DOM技术（Virtual DOM）

更新阶段

加载页面的时候，其实到mounted这里就结束了，更新和销毁并不会触发到。

销毁阶段

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

总结

Vue 组件的生命周期分为四个阶段，每个阶段有两个生命钩子，注意前后钩子。

（1）创建阶段：主要用于组件创建时，获取数据设置组件。
beforeCreate组件实例刚被创建，组件属性data、el等还未生成
created（能够访问创建成功的组件实例，但不能访问 模板，el 或 DOM）
（2）挂载阶段：主要用于访问组件 DOM
beforeMount在挂载开始之前被调用，完成了 el 和 data 初始化
mounted（能够访问组件模板，模板挂载完毕，el 被新创建的 vm.$el 替换）
（3）更新阶段：数据变化，组件重新渲染。
beforeUpdate（能够访问组件更新后的数据，但无法访问 DOM）
updated（能够访问 DOM）

（4）销毁阶段：（用于销毁组件，做清理工作）
beforeDestory（销毁前还能访问组件实例）
destoryed销毁完毕，销毁实例，清理实例连接，解绑它的全部指令及事件监听器，并不会清除data的数据或者清除dom