解析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实现的完美渐变弹出层效果代码
Apr 02 Javascript
Jquery提交表单 Form.js官方插件介绍
Mar 01 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
jquery获取div距离窗口和父级dv的距离示例
Oct 10 Javascript
jQuery多个input求和的实现方法
Feb 12 Javascript
jquery实现最简单的滑动菜单效果代码
Sep 12 Javascript
ES6记录异步函数的执行时间详解
Aug 31 Javascript
javascript 使用正则test( )第一次是 true,第二次是false
Feb 22 Javascript
vue.js中mint-ui框架的使用方法
May 12 Javascript
解决vue-router进行build无法正常显示路由页面的问题
Mar 06 Javascript
Javascript的console['']常用输入方法汇总
Apr 26 Javascript
bootstrap动态调用select下拉框的实例代码
Aug 09 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 file_get_contents函数读取远程数据超时的解决方法
2015/05/13 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
ThinkPHP项目分组配置方法分析
2016/03/23 PHP
Prototype使用指南之string.js
2007/01/10 Javascript
Javascript----文件操作
2007/01/18 Javascript
jQuery 行背景颜色的交替显示(隔行变色)实现代码
2009/12/13 Javascript
关于COOKIE个数与大小的问题
2011/01/17 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
2015/06/19 Javascript
JavaScript跨域调用基于JSON的RESTful API
2016/07/09 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
Javascript动画效果(1)
2016/10/11 Javascript
微信小程序之仿微信漂流瓶实例
2016/12/09 Javascript
Kotlin学习第一步 kotlin语法特性
2017/05/25 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
javascript函数的节流[throttle]与防抖[debounce]
2017/11/15 Javascript
Vue单页应用引用单独的样式文件的两种方式
2018/03/30 Javascript
React 组件间的通信示例
2018/06/14 Javascript
解决vue.js this.$router.push无效的问题
2018/09/03 Javascript
vue-router跳转时打开新页面的两种方法
2019/07/29 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
[01:33]真香警告!DOTA2勇士令状不朽珍藏Ⅱ饰品欣赏
2018/06/26 DOTA
python命令行参数sys.argv使用示例
2014/01/28 Python
python中的sort方法使用详解
2014/07/25 Python
编写Python小程序来统计测试脚本的关键字
2016/03/12 Python
Django 添加静态文件的两种实现方法(必看篇)
2017/07/14 Python
Python实现爬虫抓取与读写、追加到excel文件操作示例
2018/06/27 Python
Pytorch Tensor 输出为txt和mat格式方式
2020/01/03 Python
Python实现发票自动校核微信机器人的方法
2020/05/22 Python
Scrapy-Redis之RedisSpider与RedisCrawlSpider详解
2020/11/18 Python
HTML5 自动聚焦(autofocus)属性使用介绍
2013/08/07 HTML / CSS
乡镇交通安全实施方案
2014/03/29 职场文书
感恩教师节演讲稿
2014/09/03 职场文书
离婚协议书格式
2014/11/21 职场文书
个人党性锻炼总结
2015/03/05 职场文书
react中props 的使用及进行限制的方法
2021/04/28 Javascript
Oracle 11g数据库使用expdp每周进行数据备份并上传到备份服务器
2022/06/28 Oracle