Vue 生名周期总结

Vue 生名周期总结

详细：

new Vue
初始化Vue, 将Vue变为事件发生触发器
// beforeCreate 函数 //
将data，computed等，里的字段变为getter/setter
// created 函数  //
看有没有el
有，看有没有template
如果有，就用template里的内容当模板
如果没有，用el所选的outerHTML为模板
// beforeMount 函数 //
template的模板加上data等字段上的数据，构成页面，替换掉el选中的挂载点。
// mounted 函数  //
-----------------------------
监听数据的变化
// beforeUpdate 函数 //  //数据在即将发生改变时调用
数据变化，重新计算出新的虚拟bom，更新到视图上面。
// updated 函数 //   //数据发生改变后调用
！！！！这个阶段会进行多次
------------------------
// beforeDestroy 函数 //  //组件在即将销毁前时调用
// destroyed 函数 //  //组件在销毁后调用

-------------------------------------------------------
先用render函数返回新的虚拟dom信息。再和上一次的虚拟dom做比较，算出2个虚拟dom的差异diff信息。再将新的dom画回页面。
计算diff信息的算法不是最优的，因为为了找到最优的diff信息的算法复杂度为O(n)**3,所以框架用的diff算法为同级节点做比较.

简写：

beforeCreate() {
},
created() {
},
beforeMount() {
},
mounted() {
},
beforeUpdate() {
},
updated() {
},
beforeDestroy() {
},
destroyed() {
}