生命周期的实现原理

生命周期会进行两次初始化合并

• 第一次是全局的混入vm.mixin

• 第二次是组件初始化后，用户传进来的options会和vue全局的api钩子合并

• 核心就是 callHook函数

• callHook函数依次执行对应的生命周期函数

 export function callHook(vm, hook) {
  let handlers = vm.$options[hook];
  handlers.forEach((handler) => {
    handler.call(vm);
  });
}

  Vue.prototype._init = function (options) {
    // el ,data
    const vm = this;
    // vm.$options = options; // 后面会对options扩展
    vm.$options = mergeOptions(this.constructor.options, options); // 这里需要将去全局混入的配置和当前初始化传进来的optios合并
    // 对 data  computed watch props  进行状态处理

    callHook(vm, "beforeCreate");

    initState(vm);

    callHook(vm, "created");

    console.log(vm.$options);

    // 用户可以直接用vm.$mount进行挂载，或者判断el进行挂载
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
  
  export function mountComponent(vm, el) {
  // 更新函数 数据变化后会再次调用此函数
  function updateComponent() {
    //   调用render函数生成虚拟dom
    vm._update(vm._render());
    // 用虚拟dom生成真是dom
  }
  // updateComponent();

  callHook(vm, "beforeMount");
  //创建一个观察者watcher
  new Watcher(vm, updateComponent, () => {}, true);
}