VUE--生命周期总结

120 阅读1分钟

根据已有的练习题练习。来自码农练习生~ 1.vue实例创建需要初始化过程,需要设置数据监听,数据观测,编译模板,挂载实例等。

beforecreate:data,message,el都没有。

初始化VUE实例,进行数据观测。

created: el没有。data,message有。

完成数据观测,属性和方法的运算,watch,event事件回调的配置 可调用methods中的方法,访问和修改data数据触发响应式DOM。 可通过computed和watch完成数据计算。 可以请求ajax数据。

beforeMount: 1.判断是否存在el选择,不存在则停止编译,等到vm.mount(el)调用时再继续编译。

2.如果存在el,那么判断是否存在template,若存在,则tmplate编译render函数。不存在则直接编译el对应的outerhtml

3.存在render函数,对它进行编译。

4.过程中vm.el被实例化为el选项对应DOM元素,

过程中:vm.el生成的DOM替换路EL选项对应的DOM。 mounted:已挂载。已完成DOM的挂载和渲染。 beforeupdate: view层未更新。 更新的数据必须是渲染到模板上的。 挂载完成后,才触发更新方法。

updated: view层的更新。updated中再次修改数据,会触发更新方法。当数据变化后,通过NODE对比,DIFF算法更新,删除,添加操作生成真实的DOM节点。

beforedestory: 实例被销毁前调用,此时实例还可以访问。

destroyed: 实例被销毁后调用。完全销毁一个实例。清理它与其他实例的连接。解绑指令与监听器。 watch对象释放,并不能清除DOM