VUE-浅谈VUE生命周期的理解

VUE-浅谈VUE生命周期的理解

定义：

Vue中的实例从创建 —> 销毁的过程

1、创建
2、初始化数据
3、编译template
4、挂在DOM
5、渲染
6、更新渲染
7、卸载

生命周期钩子

beforeCreate — 组件实例创建之初(可以引入第三方插件)
created — 组件已经创建完成（异步请求的获取 此时dom并没有生成）
beforeMount — 组件挂载之前
mounted — 组件挂载之后 （异步请求获取 render dom更新 页面变化）
beforeUpdate — 数据发生变化 更新之前
updated — 数据发生变化更新后
beforeDestroy — 实例销毁前
destroyed— 实例销毁后
activated —— keep-alive 组件激活
deactivated —— keep-alive 组件停用
errorCaptured —— 捕获实例错误

JS

1. new Vue const vm = new Vue() {} // 创建空的实例对象
2. init events lifecycle // 初始化
   // beforeCreate
3. init reactivity data injection methods // 响应式 数据可以进行初始化创建了
   // created
4. 如果没有 el属性, option vm.$mount(el)
5. 如果没有template属性， outerHTML as tempalte
   //beforeMount 此时模板已经编译好了但是页面未更新
6. vm.$el repalce $el 将内存中的模板替换到页面上
   // mounted 在DOM进行渲染完成
   // beforeUpdate
7. VDOM re-render patch
   //udpdated 此时页面数据已经是最新的了
   // beforeDestroy
8. 此时data methods filter directive全部都是可用的
   // destroyed
9. 完成销毁工作