Vue源码二次解析【理论】3------Vue初始化全过程-----挂载过程

最新推荐文章于 2022-07-29 15:19:55 发布

原创最新推荐文章于 2022-07-29 15:19:55 发布 · 269 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#源码解析 #Vue #理论

前端同时被 2 个专栏收录

49 篇文章

订阅专栏

Vue.js

44 篇文章

订阅专栏

本文对Vue实例挂载过程进行源码解析。先缓存原型方法并重新定义，对挂载节点有限制，若未定义相关方法会进行转换。还拆分挂载方法参数，介绍其调用流程，最终更新DOM，同时给出了相关js源文件的github地址。

Vue 中是通过 $mount 实例方法去挂载 vm 的。整个过程是先缓存原型上的 $mount 方法，然后重新定义该方法。首先，它对 el 做了限制，Vue 不能挂载在 body、html 这样的根节点上。接下来的是判断有没有定义render 方法。如果没有定义 render 方法，则会把 el 或者 template 字符串转换成 render 方法。整个大的过程如下：

接下来拆分$mount ，从$mount 方法传入的2 个参数看起，第一个是 el，它表示挂载的元素，可以是字符串，也可以是 DOM 对象，如果是字符串在浏览器环境下会调用 query 方法转换成 DOM 对象的。第二个参数是和服务端渲染相关，在浏览器环境下我们不需要传第二个参数。接着$mount 方法会去调用 mountComponent 方法，mountComponent 方法的核心就是先调用 vm._render 方法生成虚拟 Node，再实例化一个渲染Watcher，在它的回调函数中会调用 updateComponent 方法，最终调用 vm._update 更新 DOM。