vue生命周期总结

170 阅读1分钟

1 beforcreate

实例刚在内存中被创造出来还没有初始化好data和methods数据,此时的观察数据和事件机制都未形成不能获取dom节点。(实例类似于创建一个对象里面包含生命周期函数methods方法,components,计算属性等)

2 created

实例已经创建但是仍然不能获取dom元素,html尚未渲染,实例已经完成数据观察(data observer)属性和方法的运算,watch/event事件回调,然而挂载阶段尚未开始,$el属性尚不可见)

3beforeMount

实例挂载之前此时依然得不到具体的dom元素,但vue挂载的根节点已经创建(BOM是浏览器对象模型,DOM是文档对象模型,前者是对浏览器本身进行操作,而后者是对浏览器(可看成容器)内的内容进行操作)。

4 mounted

数据和dom都已经渲染出来了,是平时用的最多的函数一般我们的异步请求都写在这里。

5 beforeupdate

重新渲染前触发,然后vue的虚拟dom机制会重新构建虚拟dom与上一次的dom树利用diff算法进行对比后重新渲染(只有view上面的数据变化才会触发beforeUpdate和updated,仅属于data中的数据改变是并不能触发)

6 updated

数据已经更新完成,dom也已经render完成。

7 beforedestory

销毁前($destroy方法被调用时发生),一般在这里清楚计时器,非指令的绑定等等。

8 destroyed

销毁后卸载watcher,事件监听,子组件,dom元素存在只是不再受vue控制。