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() {
}