vue 生命周期剖析

创建和挂载阶段

• 1.new Vue()
• 2.加载生命周期函数
• 3.调用 beforeCreate()
  • 这个方法使用不了数据，方法，dom操作 （一般极少使用）
• 4.读取vue实例的配置项，加载数据，方法，监听。。。
• 5.调用 created()
• 6.判断是否有el 配置项 没有的话 等待$mount()执行el 进行dom 挂载

 setTimeout(()=>{  //可以动态挂载dom 在需要的时间 再使用 
     app.$mount('#app');
},2000)

• 7.判断是否有template配置项,如果没有 会把el.outerHTML当成 template 就是在外面写的html (app标签内的html)
• 8.调用render 函数 渲染函数
• 9.调用 deforeMount()
• 10.使用渲染好的template替换el
• 11.调用 mounted()
• 12.vue实例就可以正常工作了

更新阶段

• 1.当数据已经发生变化 数据监听回调被调起
• 2.如果dom 使用了该属性 调用 beforeUpdate()
• 3.重新渲染dom
• 4.调用 updated()
• 5.调用$nextTick() 监听具体由什么原因导致dom更新的

销毁阶段

• 1.当实例调用$destory()
• 2.实例进入销毁阶段
• 3.beforeDestory() 移出监听,移出外部对实例内部引用(在这里要删除自己创建的监听 否则销毁后 会造成内存泄漏
• 4.vue实例内部产生的引用和监听也会移除(vue内部自己做的)
• 5.调用 destroy() 所有的都被销毁