解析vue中的$mount


Posted in Javascript onDecember 21, 2017

本文主要是带领大家分析$mount。

$mount所做的工作从大体来讲主要分为3步:

1.如果你的option里面没有 render 函数,那么,通过 compileToFunctions 将HTML模板编译成可以生成VNode的Render函数。

2.new 一个 Watcher 实例,触发 updateComponent 方法。

3.生成vnode,经过patch,把vnode更新到dom上。 由于篇幅有限,这里先说前两步,第三步下篇说。 好,下面具体的说。首先,我们来到 $mount 函数,如下图:

解析vue中的$mount 

我们呢可以看到,代码首先判断option里面有没有render函数,没有的话,进一步判断有没有template,没有的话就用dom元素的outerHTML。得到template以后干什么了呢?如下图。

解析vue中的$mount  

我们可以看到,调用了 compileToFunctions 将template转成render函数。这里面有两个过程:

  • 将template解析成ast语法树。
  • 通过ast语法树生成render函数。

具体的将template解析成ast语法树在本文就不说了,有时间单独开一个章节分析。好,这下我们拿到render函数了,那么接下来一步干什么了呢?没错,就开始 mountComponent 了。如下图:

解析vue中的$mount  

可以从上图看到,程序声明了一个 updateComponent 方法,这个是将要被 Watcher 实例调用的更新组件的方法,过一会分析到 Watcher 的时候将会看到。至于为什么会有个判断语句来根据条件声明 updateComponent 方法,其实从 performance 可以看出,其中一个方法是用来测试 render 和 update 性能的。好我们终于该到 Watcher 了,先看这句代码:

// we set this to vm._watcher inside the watcher's constructor
// since the watcher's initial patch may call $forceUpdate (e.g. inside child
// component's mounted hook), which relies on vm._watcher being already defined
new Watcher(vm, updateComponent, noop, null, true /* isRenderWatcher */);

我们先来分析一下注释里所说的 _watcher 是啥玩意呢?其实看看 forceupdate 的代码就知道了:

Vue.prototype.$forceUpdate = function () {
 var vm = this;
 if (vm._watcher) {
  vm._watcher.update();
 }
 };

就是调用这个vm的 _watcher 的 update 方法。用来强制更新。为什么叫强制更新呢?vue里面有判断,如果新值 == 旧值, 那么就不触发watcher更新视图了~ 所以,如果非要更新就要调用 forceupdate 来强制更新了。好,让我们来看一看传进去的参数吧:

  • vm:当前的vm实例
  • updateComponent 这个非常重要,用来在后面将vnode更新到dom上的。
  • noop 无意义的函数
  • null option选项,没有则为null
  • true 主要是用来判断是哪个watcher的。因为computed计算属性和如果你要在options里面配置watch了同样也是使用了 new Watcher ,加上这个用以区别这三者。好,我们来看看 new Watcher 都做了什么事,如下图。

解析vue中的$mount 

首先,我们看到代码有个这个判断

if (isRenderWatcher) {
 vm._watcher = this;
}

可以看到,如果声明这个watcher的上下文是用来渲染视图的,也就是说是在 mountComponent 这里调用的 new Watcher 的时候,才会把this赋值给_watcher。然后把 watcher push到 _watchers 里面,目的是等到组件销毁时顺便把watcher也销毁掉。然后就是初始化watcher的成员,代码如下:

this.deep = this.user = this.lazy = this.sync = false;<br />

接下来,就是赋值给 getter , this.getter = expOrFn 。还记得刚才传过来的 updateComponent 函数么,没错,就是这个赋值给我 getter 。然后我们就到了:

this.value = this.lazy
 ? undefined
 : this.get();

进入到 get 方法里面,我们看看到底做了什么。get代码如下图:

解析vue中的$mount 

我们可以看到,首先它执行的是 pushTarget(this) , pushTarget(this) 代码如下:

function pushTarget (_target) {
 if (Dep.target) { targetStack.push(Dep.target); }
 Dep.target = _target;
}

也就是说如果当前有 Dep.target 的话,就把target放到 targetStack 里面,如果没有的话,就设为当前的target,也就是这个watcher。 接着,就是执行了它的 getter 属性,也就是刚刚传入 updateComponent 函数。而 updateComponent 就是我们开篇提到第三步了。

总结

以上所述是小编给大家介绍的vue中的$mount,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
javascript中clone对象详解
Dec 03 Javascript
jQuery中offset()方法用法实例
Jan 16 Javascript
简单谈谈javascript代码复用模式
Jan 28 Javascript
JS运动相关知识点小结(附弹性运动示例)
Jan 08 Javascript
使用Jasmine和Karma对AngularJS页面程序进行测试
Mar 05 Javascript
分享JS数组求和与求最大值的方法
Aug 11 Javascript
JS锚点的设置与使用方法
Sep 05 Javascript
js获取json中key所对应的value值的简单方法
Jun 17 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
javascript用rem来做响应式开发
Jan 13 Javascript
微信小程序图片轮播组件gallery slider使用方法详解
Jan 31 Javascript
Vue组件通信$attrs、$listeners实现原理解析
Sep 03 Javascript
vue中使用refs定位dom出现undefined的解决方法
Dec 21 #Javascript
js中bool值的转换及“&amp;&amp;”、“||”、 “!!”详解
Dec 21 #Javascript
利用node实现一个批量重命名文件的函数
Dec 21 #Javascript
详解webpack3编译兼容IE8的正确姿势
Dec 21 #Javascript
利用vue开发一个所谓的数独方法实例
Dec 21 #Javascript
开发Vue树形组件的示例代码
Dec 21 #Javascript
详解使用vuex进行菜单管理
Dec 21 #Javascript
You might like
浅谈PHP eval()函数定义和用法
2016/06/21 PHP
PHP实现随机生成水印图片功能
2017/03/22 PHP
Laravel框架Eloquent ORM修改数据操作示例
2019/12/03 PHP
javascript 日期常用的方法
2009/11/11 Javascript
jquery操作checked属性以及disabled属性的多种方法
2014/06/20 Javascript
基于Bootstrap的Metronic框架实现条码和二维码的生成及打印处理操作
2016/08/29 Javascript
JS简单获取客户端IP地址的方法【调用搜狐接口】
2016/09/05 Javascript
JavaScript 是什么意思
2016/09/22 Javascript
Vue AST源码解析第一篇
2017/07/19 Javascript
Vuejs实现购物车功能
2017/11/05 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
2020/11/12 Javascript
vue实现图片裁剪后上传
2020/12/16 Vue.js
编写自定义的Django模板加载器的简单示例
2015/07/21 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python并发编程协程(Coroutine)之Gevent详解
2017/12/27 Python
python 多维切片之冒号和三个点的用法介绍
2018/04/19 Python
老生常谈python中的重载
2018/11/11 Python
python绘制雪景图
2019/12/16 Python
python匿名函数lambda原理及实例解析
2020/02/07 Python
python在一个范围内取随机数的简单实例
2020/08/16 Python
CSS3过渡transition效果实例介绍
2016/05/03 HTML / CSS
使用phonegap获取设备的一些信息方法
2017/03/31 HTML / CSS
交通事故检查书范文
2014/01/30 职场文书
个人承诺书
2014/03/26 职场文书
2014年乡镇党建工作总结
2014/11/11 职场文书
高三毕业评语
2014/12/31 职场文书
本科毕业论文致谢怎么写
2015/05/14 职场文书
奥巴马开学演讲观后感
2015/06/12 职场文书
升学宴家长致辞
2015/07/27 职场文书
单位车辆管理制度
2015/08/05 职场文书
小学生组织委员竞选稿
2015/11/21 职场文书
励志正能量20句:送给所有为梦想拼搏的人
2019/11/11 职场文书
800字作文之大雪
2019/12/04 职场文书
Python IO文件管理的具体使用
2022/03/20 Python
Linux下搭建SFTP服务器的命令详解
2022/06/25 Servers