一、虚拟DOM详解

1. 什么是虚拟dom？

虚拟DOM本质上就是一个js对象，用于描述视图的界面结构在 vue 中，每个组件都有一个 render 函数，每个 render 函数都会返回一个虚拟 dom 树，这也就意味着每个组件都对应一颗虚拟 DOM 树。

2. 为什么需要虚拟dom？

在 vue 中，渲染视图会调用 render 函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实 DOM，由于真实 DOM 的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。因此， vue在渲染时，使用虚拟dom来替代真实dom，主要解决渲染效率的问题。

3. 虚拟dom是如何转换为真实dom的？

在一个组件实例首次被渲染时，render函数首先会生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置。此时，每个虚拟dom便会对应一个真实的dom。如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新的树和旧的树对比，通过对比，vue会找到最小更新量，然后更新必要的虚拟dom节点。最后，这些更新过的虚拟节点，回去修改它们对应的真实dom。这样，就保证了对真实dom达到最小的改动。

4. 模板和虚拟dom的关系

vue框架中有一个compile模块，它主要负责将模板转换为render函数，而render函数调用后将得到虚拟dom。编译的过程分为两步：

将模板字符串转换为AST
将AST转换为render函数如果使用传统的引入方式，则编译时间发生在组件第一次加载时，这称之为运行时编译。如果是在vue-cli的默认配置下，编译发生在打包时，这称之为模板预编译。编译是一个极其耗费性能的操作，预编译可以有效的提高运行的性能，而且，由于运行的时候已不需要编译，vue-cli在打包时会排除掉vue中的compile模块，以减少打包体积。模板的存在，仅仅是为了让开发者更加方便的书写界面代码。 vue最终运行的时候，最终需要的是render函数，而不是模板。因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置。

二、数据响应式原理

响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函时。在具体实现上，vue用到了几个核心部件：Observer、Dep、Watcher、Scheduler

1. Observer

Observer要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象。为了实现这一点，Observer把对象的每个属性通过Object.defineProperty转换为带有getter和setter的属性，这样一来，当访问或设置属性时，vue就有机会做一些别的事情。 Observer是vue内部的构造器，我们可以通过Vue提供的静态方法 Vue.observable(object)间接的使用该功能。在组件生命周期中，这件事发生在beforeCreate之后，created之前。具体实现上，它会递归遍历对象的所有属性，以完成深度的属性转换。由遍历只能遍历到对象的当前属性，因此无法监测到将来动态增加或删除的属性，因此vue提供了 $set和$ delete两个实例方法，让开发者通过这两个实例方法对已有响应式对象添加或删除属性。对于数组，vue会更改它的隐式原型，之所以这样，是因为你vue需要监听那些可能改变数组内容的方法。数组 ---> vue自定义的对象 ---> Array.prototype 总之，Observer的目标是让一个对象，它属性的读取、赋值，内部数组的变化都要能够被vue感知到。

2. Dep

这里有两个问题没有解决，就是读取属性时要做什么事，属性变化时要做什么事。这就需要依靠Dep来解决。 Dep：Dependency，表示依赖。 vue会为响应式对象中的每个属性、对象本身、数组本身创建一个Dep实例，每个实例都有能力做以下两件事：

记录依赖，是谁在用。（getter ---> 记录依赖 dep.depend()）
派发更新：我变了，我要通知那些用到我的人 (setter ---> 派发更新 dep.notify())

3. Watcher

这里又出现一个问题，就是Dep如何知道谁在用我？要解决这个问题，就需要依赖另一个东西，就是 Watcher。当某个函数执行的过程中，用到了响应式数据，响应式数据是无法知道哪个函数在用自己的。因此，vue通过一种巧妙的办法来解决这个问题。我们不要直接执行函数，而是把函数交给一个叫做 Watcher 的东西去执行，watcher是一个对象，每个这样的函数执行时都应该创建一个watcher，通过watcher去执行。 watcher会设置一个全局变量，让全局变量记录当前负责执行的watcher等于自己，然后再去执行函数，在函数执行过程中，如果发生了依赖记录dep.depend()，那么Dep就会把这个全局变量记录下来，表示：有一个watcher用到了我这个属性。当Dep进行派发更新时，它会通知之前记录的所有watcher：我变了。 getter ---> 记录依赖 dep.depend() ---> watcher setter ---> 派发更新 dep.notify() ---> watcher 每一个vue组件实例，都至少对应一个watcher，该watcher中记录了该组件的render函数。 watcher首先会把render函数运行一次以收集依赖，于是那些在render中用到的响应式数据就会记录这个watcher。当数据变化时，dep就会通知该watcher，而watcher将重新运行render函数，从而让界面重新渲染同时重新记录当前的依赖。

4. Scheduler

现在还剩下最后一个问题，就是Dep通知watcher之后，如果watcher执行重运行对应的函数，就可能导致函数频繁运行，从而导致效率低下。试想，如果一个交给watcher的函数，它里面用到了属性a,b,c,d,那么a,b,c,d属性都会记录依赖，于是下面的代码将触发4次更新。

state.a = 'new data'
state.b = 'new data'
state.c = 'new data'
state.d = 'new data' 这样显然是不合适的，因此，watcher收到派发更新的通知后，实际上不是立即执行对应函数，而是把自己交给一个叫调度器的东西。调度器维护一个执行队列，该队列同一个watcher仅会存在一次，对列中的watcher不是立即执行，它会通过一个叫做nextTick 的工具方法，把这些需要执行的watcher放入到事件循环的微队列中，nextTick的具体做法是通过 Promise 完成的。也就是说，当前响应式数据变化时，render函数的执行是异步的，并且在微队列中。

Vue源码学习