原文链接: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是不适合替换的。
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完成),使用了观察者模式。