花溪变态杀人狂,静坐冥想,杰克逊返京治疗
本文主要是带领大家分析$mount。
$mount所做的工作从大体来讲主要分为3步：
1.如果你的option里面没有 render 函数，那么，通过 compiletofunctions 将html模板编译成可以生成vnode的render函数。
2.new 一个 watcher 实例，触发 updatecomponent 方法。
3.生成vnode，经过patch，把vnode更新到dom上。 由于篇幅有限，这里先说前两步，第三步下篇说。 好，下面具体的说。首先，我们来到 $mount 函数，如下图：
我们呢可以看到，代码首先判断option里面有没有render函数，没有的话，进一步判断有没有template，没有的话就用dom元素的outerhtml。得到template以后干什么了呢？如下图。
我们可以看到，调用了 compiletofunctions 将template转成render函数。这里面有两个过程：
具体的将template解析成ast语法树在本文就不说了，有时间单独开一个章节分析。好，这下我们拿到render函数了，那么接下来一步干什么了呢？没错，就开始 mountcomponent 了。如下图：
可以从上图看到，程序声明了一个 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 来强制更新了。好，让我们来看一看传进去的参数吧:
首先，我们看到代码有个这个判断
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代码如下图:
我们可以看到，首先它执行的是 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，希望对大家有所帮助
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论