vue2根组件挂载时做了什么

305 阅读1分钟

1、根组件创建时调用了Vue._init()
2、初始化一切之后调用了vm.$mount

// .....
    if (vm.$options.el) {
      vm.$mount(vm.$options.el);
    }
  };
}

3、先通过el得到根结点DOM
4、获取到根结点内部的所有html代码outerHTML这就是template

template被一系列猛如虎的操作变成了 => render函数(内部就是解析template,并且将数据渲染到根结点等操作)

5、render被赋值到了vm.$option
6、调用mountComponent方法
7、一次调用beforeMount mounted

总结:根组件挂载时,初始化虚拟dom,以及生命周期等选项,同时解析template,获取根结点dom,最后渲染组件