vue实例挂载的过程中发生了什么?

48 阅读1分钟

image.png

在调用beforeCreate之前,数据初始化并未完成,像data,props这些属性无法访问到
到了created的时候,数据已经初始化完成,能够访问data、props这些属性,但这时候并未完成dom挂载,因此无法访问到dom元素。
挂载方法是调用vm.$mount方法

对template的解析步骤大致分为以下几步:
1,将html文档片段解析成ast描述符
2,将ast描述符解析成字符串
3,生成render函数
生成render函数,挂载到vm上后,会再次调用mount方法。

三:结论

new Vue的时候调用会调用_init方法

  • 定义set,set,get,delete,delete,watch等方法
  • 定义on,on,off,emit,emit,off等事件
  • 定义_update,forceUpdate,forceUpdate,destroy生命周期

调用$mount进行页面挂载,挂载的时候主要通过mountComponent方法,定义updateComponent更新函数,执行render生成虚拟DOM,_update将虚拟Dom生成真实Dom结构,并且渲染到页面中

参考网站:www.cnblogs.com/gerry2019/p… mp.weixin.qq.com/s?__biz=MzU…