Vue源码之$mount实现数据挂载(三)

时间:2024-05-22 17:57:59

原文链接:https://blog.****.net/yayayayaya_/article/details/80888506

在vue实例中,通过$mount()实现实例的挂载,下面来分析一下$mount()函数都实现了什么功能。

在'src/platforms/web/entry-runtime-with-compiler',$mount函数在Vue的原型上被定义

$mount函数的流程

1. 首先,提取出el所对应的dom元素。其中的query函数的主要用途是使用原生的querySelector(查找第一个匹配的dom元素)来查找dom,如果没有找到则新建一个div返回;若el自身就是一个dom元素,则直接返回。

但是,el不能是body或者html,原因是vue在挂载是会将对应的dom对象替换成新的div,但body和html是不适合替换的。

Vue源码之$mount实现数据挂载(三)

Vue源码之$mount实现数据挂载(三)

2. 若vue实例中没有render,则将template编译成render,也就是说vue只认render函数,同时,因为template可以写成多挣形式,因此el也会转换成template(使用getOutHTML函数),再转换成render

Vue源码之$mount实现数据挂载(三)

Vue源码之$mount实现数据挂载(三)

在getOuterHTML中,主要是获得el所对应的dom及其内容

Vue源码之$mount实现数据挂载(三)

3. 最后,调用mount函数完成渲染。

Vue源码之$mount实现数据挂载(三)

 

mountComponent函数的流程和功能

再上一层,在'runtime/index.js’中定义的$mount函数调用了mountComponent函数

Vue源码之$mount实现数据挂载(三)

 

在‘core/instance/lifecycle.js’中定义了mountComponent函数:

1. 在该函数中,首先判断是否有render

Vue源码之$mount实现数据挂载(三)

 

2. 然后,定义updateComponent函数,该函数完成的功能是渲染和更新。至于什么时候调用这个函数,这个过程是使用观察者模式,由wacher一起完成的。

Vue源码之$mount实现数据挂载(三)

Vue源码之$mount实现数据挂载(三)

 

3. 在'src/core/observer/watach.js'中定义了Watcher类,在构造函数中,传入的参数中有一个是否为渲染watcher,如果是,则将初始化实例的_watcher

Vue源码之$mount实现数据挂载(三)

然后,将getter赋值给expOrFn,这里传给expOrFn的是updateComponent

Vue源码之$mount实现数据挂载(三)

随后,调用get函数

Vue源码之$mount实现数据挂载(三)

在get函数中,主要是收集一些依赖,然后在初始化或者有更新时,调用this.getter(对应着updateComponent函数)

Vue源码之$mount实现数据挂载(三)

 

总结

在$mount中,首先是根据template将其转换为render(在没有render的情况下),然后调用mountComponent函数,该函数主要调用的是updateComponent函数。

updateComponent函数使用渲染watcher,在初次渲染或者值发生改变的时候调用该函数(这个过程由wacher完成),使用了观察者模式。