创建vue实例

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

首先做一些初始化的操作，主要是设置一些私有属性到实例中
运行生命周期钩子函数beforeCreate

进入注入流程：处理属性、computed、methods、data、provide、inject，最后使用代理模式将它们挂载到实例中

伪代码:

function Vue(options) {
  var data = options.data();
  observe(data); // 变成响应式数据
  var methods = options.methods;
  // 这里循环data中的所有属性，不需要递归，这是个代理
  Object.defineProperty(this, "a", {
    get() {
      return data.a;
    },
    set(val) {
      data.a = val;
    },
  });
  // Object.entries()方法返回一个给定对象自身可枚举属性的键值对数组
  Object.entries(methods).forEach(([methodName, fn]) => {
    // 为啥methods中的this是Vue实例，是因为通过bind绑定this
    this[methodName] = fn.bind(this);
  });
}

运行生命周期钩子函数created
生成render函数：如果有配置，直接使用配置的render，如果没有，使用运行时编译器，把模板编译为render

运行生命周期钩子函数beforeMount
创建一个Watcher，传入一个函数updateComponent，该函数会运行render，把得到的vnode再传入_update函数执行。

伪代码：

  var updateComponent = () => {
    this._update(this._render());
  };

  new Watcher(updateComponent);

在执行_render函数的过程中，会收集所有依赖，将来依赖变化时会重新运行updateComponent函数
在执行_update函数的过程中，触发patch函数，由于目前没有旧树，因此直接为当前的虚拟dom树的每一个普通节点生成elm属性，即真实dom。
如果遇到创建一个组件的vnode，则会进入组件实例化流程，该流程和创建vue实例流程基本相同。

new Vue(vnode.componentOptions);

最终会把创建好的组件实例挂载vnode的componentInstance属性中，以便复用。

运行生命周期钩子函数mounted

示例代码

App.vue

<template>
  <div id="app">
    <h1>App</h1>
    <A v-if="show" :count="count" />
    <button @click="count++">increase</button>
    <button @click="show = !show">toggle</button>
  </div>
</template>

<script>
import A from "./A.vue";

export default {
  components: { A },
  data() {
    return {
      show: true,
      count: 0,
    };
  },
  beforeCreate() {
    console.log("App beforeCreate");
  },
  created() {
    console.log("App created");
  },
  beforeMount() {
    console.log("App beforeMount");
  },
  mounted() {
    console.log("App mounted");
  },
  beforeUpdate() {
    console.log("App beforeUpdate");
  },
  updated() {
    console.log("App updated");
  },
  beforeDestroy() {
    console.log("App beforeDestroy");
  },
  destroyed() {
    console.log("App destroyed");
  },
};
</script>

A.vue

<template>
  <div>
    <h1>A compnent: {{ count }}</h1>
    <B :count="count" />
  </div>
</template>

<script>
import B from "./B.vue";
export default {
  components: { B },
  props: ["count"],
  beforeCreate() {
    console.log("A beforeCreate");
  },
  created() {
    console.log("A created");
  },
  beforeMount() {
    console.log("A beforeMount");
  },
  mounted() {
    console.log("A mounted");
  },
  beforeUpdate() {
    console.log("A beforeUpdate");
  },
  updated() {
    console.log("A updated");
  },
  beforeDestroy() {
    console.log("A beforeDestroy");
  },
  destroyed() {
    console.log("A destroyed");
  },
};
</script>

<style></style>

B.vue

<template>
  <div>
    <h1>B compnent: {{ count }}</h1>
  </div>
</template>

<script>
export default {
  props: ["count"],
  beforeCreate() {
    console.log("B beforeCreate");
  },
  created() {
    console.log("B created");
  },
  beforeMount() {
    console.log("B beforeMount");
  },
  mounted() {
    console.log("B mounted");
  },
  beforeUpdate() {
    console.log("B beforeUpdate");
  },
  updated() {
    console.log("B updated");
  },
  beforeDestroy() {
    console.log("B beforeDestroy");
  },
  destroyed() {
    console.log("B destroyed");
  },
};
</script>

<style></style>

创建Vue实例输出

数据改变后，又发生了什么？

数据变化后，所有依赖该数据的Watcher均会重新运行，这里仅考虑updateComponent函数对应的Watcher
Watcher会被调度器放到nextTick中运行，也就是微队列中，这样是为了避免多个依赖的数据同时改变后被多次执行

运行生命周期钩子函数beforeUpdate
updateComponent函数重新执行
在执行render函数的过程中，会去掉之前的依赖，重新收集所有依赖，将来依赖变化时会重新运行updateComponent函数
在执行_update函数的过程中，触发patch函数。
新旧两棵树进行对比。
普通html节点的对比会导致真实节点被创建、删除、移动、更新
组件节点的对比会导致组件被创建、删除、移动、更新
当新组件需要创建时，进入实例化流程
当旧组件需要删除时，会调用旧组件的$destroy方法删除组件，该方法会先触发生命周期钩子函数beforeDestroy，然后递归调用子组件的$destroy方法，然后触发生命周期钩子函数destroyed
当组件属性更新时，相当于组件的updateComponent函数被重新触发执行，进入重渲染流程，和本节相同。

运行生命周期钩子函数updated

触发数据更新输出

触发组件A销毁输出

点击toggle按钮

触发组件A创建输出