开篇
本文会继续和大家一起探究数据响应式的原理，虽然文中会出现大量Vue源码，但我已经添加了注释，努力做到让读者可以轻松阅读。感兴趣的读者请继续往下看吧！
Vue2.0与Vue1.0相比有个很大的改进，就是引入了虚拟DOM。那么，虚拟DOM究竟是为了解决什么问题的呢？
在Vue中，每个变量都可能出现在模板中的任意位置，例如下面这段代码：
<body>
<div id="app">
<span>{
{myAge}}</span>
<div>{
{myAge}}</div>
</div>
<script>
const myVue = new Vue({
el: '#app',
data: {
myAge: 12,
}
})
</script>
</body>
myAge出现在了两个地方，一个地方是span标签内，另一个地方是div标签内。将来当myAge发生变化的时候，两个DOM节点的textContent都需要更新。
对于这个过程，Vue1.0的做法是创建两个watcher实例，每个实例保存一对myAge与DOM元素的映射关系。上面这段代码就产生了两个watcher实例，分别保存两对映射。对于小项目来说这么做不会出现什么问题，但项目大了之后会出现两个问题。一是过多的watcher实例会占用大量内存，二是直接对DOM的操作会让网页频繁地重新渲染，这就有可能会出现严重卡顿，影响用户体验。
为了解决上述两个问题，Vue借鉴了React的思路，在2.0中引入了虚拟DOM。这么做有两个影响
- 用户不再直接对真实DOM进行操作，而是操作虚拟DOM。虚拟DOM会在每次循环结束时对比上一次循环结束的状态，找出需要修改的DOM，尽量做到一次渲染更新全部需要修改的节点。
- 另外， 在2.0中，也不再是每一个watcher对应一对映射关系了，转而每个watcher对应一个组件。
其实上面两点是一回事，但这里不展开讲了，开篇部分只是为了做个铺垫，说得再多也不如一会儿直接看源码来的清晰，不过这里我放个图片给大家，让大家感受下虚拟DOM这个角色处于哪个位置。
JS通过响应式(reactive)操作虚拟DOM，虚拟DOM通过diff算法(patch)确定要修改的DOM元素，并修改DOM。最后DOM将操作的结果通过事件方式(events)反馈到JS代码。
源码版本
本文用到Vue源码版本为 v2.6.10，此版本是本文发布日能下载到的最新版。
$mount
我打算从虚拟DOM入手阅读源码。而Vue项目的main.js中的$mount正是生成虚拟DOM的方法，于是，打开Vue源码项目中的@\src\platforms\web\runtime\index.js找到$mount，源码如下：
Vue.prototype.$mount = function (
el?: string | Element,
hydrating?: boolean
): Component {
el = el && inBrowser ? query(el) : undefined
return mountComponent(this, el, hydrating)
}
可以看到，$mount只是将el对应的真实DOM查找出来了，真正做事的是mountComponent方法。
mountComponent
打开@\src\core\instance\lifecycle.js 找到mountComponent方法，源码如下：
export function mountComponent (
vm: Component, //当前组件的引用
el: ?Element, //当前组件的根节点，也叫挂载点，是一个真实的DOM节点
hydrating?: boolean
): Component {
/*
把刚刚传进来的真实DOM节点(根节点)的引用赋给vm.$el。
换句话说，组件的$el属性保存的是当前组件的根节点。
将来我们可以通过$el来直接操作组件的真实DOM，虽然大多数时候不需要这么做。
*/
vm.$el = el
/* 如果创建Vue实例时候没有传递render函数则进行一些错误判断，跳过 */
if (!vm.$options.render) {
vm.$options.render = createEmptyVNode
if (process.env.NODE_ENV !== 'production') {
/* istanbul ignore if */
if ((vm.$options.template && vm.$options.template.charAt(0) !== '#') ||
vm.$options.el 
最低0.47元/天 解锁文章
7228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
