目录
- 1，介绍
- 1，初次渲染
- 2，数据改变后的重渲染
- 2，生成周期钩子执行顺序
1，介绍
创建 vue 实例和创建组件的流程基本一样。
1，初次渲染
-
做一些初始化操作，主要设置一些私有属性到实例中。
-
运行 beforeCreate
-
进入注入流程，处理属性，
computed，methods，data，provide，inject等，最后使用代理模式将他们挂载到实例中（为了可通过this访问）：
// 伪代码
function Vue(options) {var data = options.data();Vue.observe(data); // 变成响应式数据var methods = options.methods;// 代理模式挂载到实例上Object.defineProperty(this, "a", {get() {return data.a;},set(val) {data.a = val;},});Object.entries(methods).forEach(([methodName, fn]) => {this[methodName] = fn.bind(this);});
}new Vue(vnode.componentOptions);
-
运行created
-
生成
render函数，如果有配置render函数则直接使用。没有则使用运行时编译器把模板template编译为render。参考虚拟DOM的生成。 -
运行 beforeMount
-
生成真实 DOM
// 伪代码
function Vue(){// ... 其他代码var updateComponent = () => {this._update(this._render())}new Watcher(updateComponent);// ... 其他代码
}
创建一个 Watcher，传入一个函数updateComponent，该函数会运行render，把得到的vnode再传入_update函数执行。
在执行render函数的过程中，会收集所有依赖，之后依赖变化时会重新运行updateComponent函数
在执行_update函数的过程中，触发patch函数，由于目前没有旧树，因此直接为当前的虚拟dom树的每一个普通节点生成 elm 属性，即真实dom。
如果遇到组件的vnode，则会进入组件的实例化流程，该流程和创建vue实例流程基本相同，最终会把创建好的组件实例挂载到其 VNode 的 componentInstance属性中，以便复用。
组件的 VNode 有2个属性：
componentOptions对应传递的属性；componentInstance对应组件实例。
对组件来说，diff 时会认为新旧2个的节点相同，所以组件实例会重用，并不会新建。如果属性变化了，给新节点的componentOptions重新赋值即可。
具体参考 数据响应式原理
- 运行
mounted
2，数据改变后的重渲染
-
数据变化后，所有依赖该数据的
Watcher均会重新运行，这里仅考虑updateComponent函数对应的Watcher -
Watcher会被调度器放到nextTick中运行，也就是微队列中，这样是为了避免多个依赖的数据同时改变后被多次执行 -
运行 beforeUpdate
-
updateComponent函数重新执行在执行
render函数的过程中，会去掉之前的依赖，重新收集所有依赖，将来依赖变化时会重新运行updateComponent函数在执行
_update函数的过程中，触发patch函数，对新旧两棵树进行对比：-
普通
html节点的对比会导致真实DOM被创建、删除、移动、更新 -
组件节点的对比会导致组件被创建、删除、移动、更新
当新组件需要创建时，进入实例化流程（前文中的初次渲染）。
当旧组件需要删除时，会调用旧组件的
$destroy方法删除组件，该方法会先触发beforeDestroy，然后递归调用子组件的$destroy方法，然后触发destroyed当组件属性更新时，相当于组件的
updateComponent函数被重新触发执行，进入重渲染流程，参考上面的步骤再来一遍。 -
-
运行updated
2，生成周期钩子执行顺序
示例：Vue 实例中渲染了 App.vue，App.vue 又引入了子组件A.vue
大致代码如下：
// main.js
import Vue from "vue";
import App from "./App.vue";new Vue({render: (h) => h(App),beforeCreate() {console.log("vue实例 beforeCreate");},// ...// 其他生命周期函数// ...destroyed() {console.log("vue实例 destroyed");},
}).$mount("#app");
<!-- App.vue -->
<template><div id="app"><h1>App</h1><A v-if="show" :count="count" /><button @click="count++">更新数据</button><button @click="show = !show">切换显示A组件</button></div>
</template><script>
import A from "./A.vue";export default {components: { A },data() {return {show: true,count: 0,};},beforeCreate() {console.log("App beforeCreate");},// ...// 其他生命周期函数// ...destroyed() {console.log("App destroyed");},
};
</script>
<!-- A.vue -->
<template><h1>A compnent: {{ count }}</h1>
</template><script>
export default {props: ["count"],beforeCreate() {console.log("A beforeCreate");},// ...// 其他生命周期函数// ...destroyed() {console.log("A destroyed");},
};
</script>
初次渲染：
vue实例 beforeCreate
vue实例 created
vue实例 beforeMountApp beforeCreate
App created
App beforeMountA beforeCreate
A created
A beforeMount
A mountedApp mounted
vue实例 mounted
数据改变后的重渲染：
注意，是因为修改的是响应式数据，所以会导致子组件触发更新，开始执行
beforeUpdate。
所以，如果子组件没有使用父组件的响应式数据，则不会触发更新。
App beforeUpdateA beforeUpdate
A updatedApp updated
当在 App.vue 通过 v-if 切换显示子组件 A.vue 时：
App beforeUpdateA beforeDestroy
A destroyedApp updated
以上。
