1，介绍

创建 vue 实例和创建组件的流程基本一样。

1，初次渲染

1. 做一些初始化操作，主要设置一些私有属性到实例中。

2. 运行 beforeCreate

3. 进入注入流程，处理属性，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);

4. 运行created

5. 生成 render 函数，如果有配置render 函数则直接使用。没有则使用运行时编译器把模板 template 编译为 render。参考虚拟DOM的生成。

6. 运行 beforeMount

7. 生成真实 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 重新赋值即可。

具体参考 数据响应式原理

8. 运行 mounted

2，数据改变后的重渲染

1. 数据变化后，所有依赖该数据的Watcher均会重新运行，这里仅考虑 updateComponent 函数对应的 Watcher

2. Watcher会被调度器放到nextTick中运行，也就是微队列中，这样是为了避免多个依赖的数据同时改变后被多次执行

3. 运行 beforeUpdate

4. updateComponent函数重新执行

   在执行render函数的过程中，会去掉之前的依赖，重新收集所有依赖，将来依赖变化时会重新运行updateComponent函数

   在执行_update函数的过程中，触发patch函数，对新旧两棵树进行对比：

   • 普通html节点的对比会导致真实DOM被创建、删除、移动、更新

   • 组件节点的对比会导致组件被创建、删除、移动、更新

   当新组件需要创建时，进入实例化流程（前文中的初次渲染）。

   当旧组件需要删除时，会调用旧组件的$destroy方法删除组件，该方法会先触发beforeDestroy，然后递归调用子组件的$destroy方法，然后触发destroyed

   当组件属性更新时，相当于组件的updateComponent函数被重新触发执行，进入重渲染流程，参考上面的步骤再来一遍。

5. 运行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

---

以上。