解析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 相关文章推荐
在js中使用&quot;with&quot;语句中跨frame的变量引用问题
Mar 08 Javascript
js hover 定时器(实例代码)
Nov 12 Javascript
Javascript的严格模式strict mode详细介绍
Jun 06 Javascript
Node.js(安装,启动,测试)
Jun 09 Javascript
微信JS-SDK坐标位置如何转换为百度地图坐标
Jul 04 Javascript
JavaScript 是什么意思
Sep 22 Javascript
JS正则表达式修饰符中multiline(/m)用法分析
Dec 27 Javascript
vue基础之data存储数据及v-for循环用法示例
Mar 08 Javascript
Vue.js中的extend绑定节点并显示的方法
Jun 20 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
javascript实现简易计算器功能
Sep 23 Javascript
实现一个简单得数据响应系统
Nov 11 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会员找回密码功能的简单实现
2016/09/05 PHP
PHP判断是手机端还是PC端 PHP判断是否是微信浏览器
2017/03/15 PHP
PHP实现Redis单据锁以及防止并发重复写入
2018/04/10 PHP
yii2多图上传组件的使用教程
2018/05/10 PHP
动态添加js事件实现代码
2009/03/12 Javascript
jquery图片上下tab切换效果
2011/03/18 Javascript
jquery常用技巧及常用方法列表集合
2011/04/06 Javascript
jQuery实现下拉框左右选择的简单实例
2014/02/22 Javascript
zeroclipboard 单个复制按钮和多个复制按钮的实现方法
2014/06/14 Javascript
angular.bind使用心得
2015/10/26 Javascript
Angular 输入框实现自定义验证功能
2017/02/19 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
JavaScript如何一次性展示几万条数据
2017/03/30 Javascript
js断点调试心得分享(必看篇)
2017/12/08 Javascript
JavaScript 复制对象与Object.assign方法无法实现深复制
2018/11/02 Javascript
JavaScript如何处理移动端拍摄图片旋转问题
2019/11/16 Javascript
JS实现TITLE悬停长久显示效果完整示例
2020/02/11 Javascript
Python实现自动添加脚本头信息的示例代码
2016/09/02 Python
Python 爬虫模拟登陆知乎
2016/09/23 Python
Python解惑之整数比较详解
2017/04/24 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
Python闭包函数定义与用法分析
2018/07/20 Python
在pycharm中python切换解释器失败的解决方法
2018/10/29 Python
python生成器与迭代器详解
2019/01/01 Python
Python如何使用函数做字典的值
2019/11/30 Python
PyCharm第一次安装及使用教程
2020/01/08 Python
Coggles美国/加拿大:高级国际时装零售商
2018/10/23 全球购物
Lacoste(法国鳄鱼)加拿大官网:以标志性的POLO衫而闻名
2019/05/15 全球购物
英国最大的汽车配件在线商店:Euro Car Parts
2019/09/30 全球购物
OnePlus加拿大官网:中国国际化手机品牌
2020/10/13 全球购物
主键(Primary Key)约束和唯一性(UNIQUE)约束的区别
2013/05/29 面试题
12岁生日感言
2014/01/21 职场文书
个人委托书如何写
2014/09/25 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
升职自荐信怎么写
2015/03/05 职场文书
Python 如何解决稀疏矩阵运算
2021/05/26 Python