Vue源码之$mount实现数据挂载（三）

原文链接：https://blog.csdn.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是不适合替换的。

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

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

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

 

mountComponent函数的流程和功能

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

 

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

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

 

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

 

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

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

随后，调用get函数

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

 

总结

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

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