vue生命周期

仅供自学 原文链接
https://juejin.cn/post/6844903811094413320

• beforeCreate()初始化页面前
• created()初始化页面后
• beforeMount()渲染dom前
• mounted()渲染dom后
• beforeUpdate()更新数据前
• updated()更新数据后
• beforeDestroy()卸载组件前
• destroyed()卸载组件后

beforeCreate->created

• 初始化vue实例，进行数据观测

created

• 完成数据观测，属性与方法的运算，watch、event事件回调的配置
• 可调用methods中的方法，访问和修改data数据触发响应式渲染dom，可通过computed和watch完成数据计算
• 此时vm.$el没有被创建
• 一般在created中进行ajax请求

created->beforeMount

• 判断是否存在el选项，若不存在则停止编译，直到调用vm.$mount(el)才会继续编译
• 若存在el，则判断是否存在template，若存在，则将template编译成render函数；若不存在，则直接编译el所对应的外部html
• 如果存在render函数，则首先对其进行编译
• 此过程中vm.el被实例化为el选项对应DOM元素，所以在beforeMount中，用vm.el获取到的是挂载DOM的HTML

优先级：render>template>outerHTML

beforeMount

• 此阶段可以获取到vm.el
• 此阶段vm.el虽已完成DOM初始化，但并未挂载在el选项上

beforeMount->mounted

• 此阶段vm.el完成挂载，vm.$el生成的DOM替换了el选项所对应的DOM

mounted

• vm.el完成DOM的挂载与渲染，挂载前，是以初始el与虚拟DOM存在的，template还未被编译到，挂载后，vm.$el完成了对el的替换，并完成了DOM的渲染

befordUpdated

• 更新的数据必须是渲染在模板上的（el、template、render）
• 此时view层还未更新
• 只有在挂载完成后，才可以触发更新方法（因为挂载完成后才完成模板的渲染，而update则是对模板数据的更新与重新渲染）
• 若在beforeUpdate中再次修改数据，不会再次触发更新方法

updated

• 完成view层的更新
• 若在updated中再次修改数据，会再次触发更新方法（beforeUpdate、update）
• 当数据变化后，通过render函数生成VNode，通过patchNodedeode对比前后变化，diff算法进行更新、添加、删除等操作生成真实的DOM节点

beforeDestroy

• 实例被销毁前调用，此时实例仍可访问

destroyed

• 实例被销毁后调用
• 完全销毁一个实例。清理他与其他实例的连接，解绑他的全部指令及事件监听器
• Watcher对象从其所在Dep中释放
• 并不能清除DOM，仅仅销毁实例
• 当beforeDestory时，实例未被销毁，此时可通过this.$refs访问到改DOM
• 当destroyed后，实例被销毁，此时this.$refs访问为null