图解
扁平化理解
new Vue()
||
||
||
初始化event和watch
||
||=====> beforeCreate
||
属性、方法、数据等内容的计算
||
||=====> created
||
存在el选项
||
||
||
不存在template选项
||
||=====> beforeMount
||
创建vm.$el替换el选项
||
||=====> mounted
||
当内容发生更新
||
||=====> beforeUpdate
||
虚拟DOM重新渲染
||
||=====> updated
||
调用vm.$destroy()
||
||=====> beforeDestroy
||
卸载watcher、子组件和事件监听=====> destroyed
伴随着整个生命周期的钩子函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
拆解分析
- beforeCreate - 创建前状态
- 在beforeCreate和created钩子函数之间的生命周期，在这个生命周期之间，进行初始化事件，进行数据的观测，可以看到在created的时候数据已经和data属性进行绑定（放在data中的属性当值发生改变的同时，视图也会改变）
- 注意看下：此时还是没有el选项
- created - 创建完毕状态
- beforeMount - 挂载前状态
- beforeMount和mounted钩子函数间的生命周期,是给vue实例对象添加$el成员，并且替换掉挂在的DOM元素Mount间的生命周期
- mounted - 挂载结束状态
- beforeUpdate - 更新前状态
- 当vue发现data中的数据发生了改变，会触发对应组件的重新渲染，先后调用beforeUpdate和updated钩子函数
- updated - 更新完成状态
- beforeDestroy - 销毁前状态
- beforeDestroy钩子函数在实例销毁之前调用。在这一步，实例仍然完全可用。
- destroyed - 销毁完成状态
- destroyed钩子函数在Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
