大前端【3-2】简述Vue首次渲染过程

第一步、Vue初始化,实例成员、静态成员

首先进行vue的初始化,即初始化实例成员及静态成员.

第二步、new Vue()

初始化结束以后,调用vue的构造函数new Vue(),在构造函数中调用this._init()方法

第三步、this.init()

this.init()相当于整个项目的入口,在这个方法中,最终调用vm.$mount()

第四步、vm.$mount()

这个$mount()是src/platform/web/entry-runtime-with-compiler.js中定义的,核心作用是把模板编译为render函数,判断是否有render选项,如果没有,则会获取template选项,如果template也没有,会把el中的内容作为模板,通过compileToFunctions()方法将模板编译为render函数,编译好以后,将render存入到options.render中。

第五步、vm.$mount()

调用src/platforms/web/runtime/index.js文件中的$mount方法,这个方法中会重新获取el,因为如果是运行时版本的话,是不会走entry-runtime-with-compiler.js这个入口中获取el,所以如果是运行时版本的话,我们会在runtime/index.js的$mount()中重新获取el。

第六步、mountComponent(this,el)

这个方法在src/core/instance/lifecycle.js中定义的,首先判断是否有render选项,如果没有但是传入了模板,并且当前是开发环境,则发出警告(运行时版本不支持编译器),触发beforeMount钩子函数(开始挂载之前),定义updateComponents函数但是并未调用,这个函数中调用render()和update()两个方法,render是生成虚拟dom,update是将虚拟dom转化为真实dom并挂载到页面上,

创建Watcher实例对象,创建时,传递函数updateComponents,然后调用get方法,创建完毕后,触发钩子函数mounted(),挂载结束,返回vue实例。

第七步、Watcher.get()

创建完watcher,会调用一次get,在get方法中会调用updateComponent(),updateComponent会调用实例化时传入的render()或者是编译模板以后生成的render(),返回vnode。然后调用vm._update(),调用vm.__patch__方法,将虚拟dom转化为真实dom并挂载到页面上,将生成的真实dom记录到vm.$el()中

猜你喜欢

转载自blog.csdn.net/qiuqiu1628480502/article/details/108504823