解析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 相关文章推荐
[IE&amp;FireFox兼容]JS对select操作
Jan 07 Javascript
js实现遍历含有input的table实例
Dec 07 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
May 16 Javascript
jquery的ajax提交form表单的两种方法小结(推荐)
May 25 Javascript
EasyUI的doCellTip实现鼠标放到单元格上提示单元格内容
Aug 24 Javascript
JavaScript与java语言有什么不同
Sep 22 Javascript
微信小程序-图片、录音、音频播放、音乐播放、视频、文件代码实例
Nov 22 Javascript
jQuery Ajax使用FormData上传文件和其他数据后端web.py获取
Jun 11 jQuery
js 获取html5的data属性实现方法
Jul 28 Javascript
webpack多入口多出口的实现方法
Aug 17 Javascript
微信小程序实现授权登录
May 15 Javascript
Vue中实现权限控制的方法示例
Jun 07 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 从数据库提取二进制图片的处理代码
2009/09/09 PHP
解析php根据ip查询所在地区(非常有用,赶集网就用到)
2013/07/01 PHP
PHP打开和关闭文件操作函数总结
2014/11/18 PHP
PHP、Python和Javascript的装饰器模式对比
2015/02/03 PHP
php实现的一段简单概率相关代码
2016/05/30 PHP
PHP实现上传图片到数据库并显示输出的方法
2018/05/31 PHP
PHP将整数数字转换为罗马数字实例分享
2019/03/17 PHP
jQuery实现带幻灯的tab滑动切换风格菜单代码
2015/08/27 Javascript
6种javascript显示当前系统时间代码
2015/12/01 Javascript
Webwork 实现文件上传下载代码详解
2016/02/02 Javascript
基于javascript实现泡泡大冒险网页版小游戏
2016/03/23 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
2017/03/04 Javascript
vue2.0实现导航菜单切换效果
2017/05/08 Javascript
Vue组件化开发思考
2018/02/02 Javascript
vue+iview+less+echarts实战项目总结
2018/02/22 Javascript
JS原型与继承操作示例
2019/05/09 Javascript
JavaScript前端页面搜索功能案例【基于jQuery】
2019/07/10 jQuery
Vue检测屏幕变化来改变不同的charts样式实例
2020/10/26 Javascript
Python中列表和元组的使用方法和区别详解
2020/12/30 Python
Python遍历某目录下的所有文件夹与文件路径
2018/03/15 Python
浅谈python下含中文字符串正则表达式的编码问题
2018/12/07 Python
python隐藏终端执行cmd命令的方法
2019/06/24 Python
Django中使用session保持用户登陆连接的例子
2019/08/06 Python
浅谈对pytroch中torch.autograd.backward的思考
2019/12/27 Python
Python3搭建http服务器的实现代码
2020/02/11 Python
浅谈基于HTML5的在线视频播放方案
2016/02/18 HTML / CSS
ASOS亚洲:ASOS Asia
2018/03/04 全球购物
最新远光软件笔试题面试题内容
2013/11/08 面试题
好人好事事迹材料
2014/02/12 职场文书
交通事故协议书范文
2014/10/23 职场文书
三峡人家导游词
2015/01/31 职场文书
2015年关爱留守儿童工作总结
2015/05/22 职场文书
我的生日感言
2015/08/03 职场文书
解读Vue组件注册方式
2021/05/15 Vue.js
Python答题卡识别并给出分数的实现代码
2021/06/22 Python