Vue 源码解析：深入响应式原理(上).docVIP

Vue 源码解析：深入响应式原理（上） Vue.js 最显著的功能就是响应式系统，它是一个典型的 MVVM 框架，模型（Model）只是普通的 JavaScript 对象，修改它则视图（View）会自动更新。这种设计让状态管理变得非常简单而直观，不过理解它的原理也很重要，可以避免一些常见问题。下面让我们深挖 Vue.js 响应式系统的细节，来看一看 Vue.js 是如何把模型和视图建立起关联关系的。 如何追踪变化 我们先来看一个简单的例子。代码示例如下： div id=main h1count: {{times}}/h1/divscript src=vue.js/scriptscript var vm = new Vue({ el: #main, data: function () { return { times: 1 }; }, created: function () { var me = this; setInterval(function () { me.times++; }, 1000); } });/script 运行后，我们可以从页面中看到，count 后面的 times 每隔 1s 递增 1，视图一直在更新。在代码中仅仅是通过 setInterval 方法每隔 1s 来修改 vm.times 的值，并没有任何 DOM 操作。那么 Vue.js 是如何实现这个过程的呢？我们可以通过一张图来看一下，如下图所示： 图中的模型（Model）就是 data 方法返回的{times:1}，视图（View）是最终在浏览器中显示的DOM。模型通过Observer、Dep、Watcher、Directive等一系列对象的关联，最终和视图建立起关系。归纳起来，Vue.js在这里主要做了三件事： 通过 Observer 对 data 做监听，并且提供了订阅某个数据项变化的能力。 把 template 编译成一段 document fragment，然后解析其中的 Directive，得到每一个 Directive 所依赖的数据项和update方法。 通过Watcher把上述两部分结合起来，即把Directive中的数据依赖通过Watcher订阅在对应数据的 Observer 的 Dep 上。当数据变化时，就会触发 Observer 的 Dep 上的 notify 方法通知对应的 Watcher 的 update，进而触发 Directive 的 update 方法来更新 DOM 视图，最后达到模型和视图关联起来。 接下来我们就结合 Vue.js 的源码来详细介绍这三个过程。 Observer 首先来看一下 Vue.js 是如何给 data 对象添加 Observer 的。我们知道，Vue 实例创建的过程会有一个生命周期，其中有一个过程就是调用 vm.initData 方法处理 data 选项。initData 方法的源码定义如下： !-源码目录：src/instance/internal/state.js-- Vue.prototype._initData = function () { var dataFn = this.$options.data var data = this._data = dataFn ? dataFn() : {} if (!isPlainObject(data)) { data = {} process.env.NODE_ENV !== production warn( data functions should return an object., this ) } var props = this._props // proxy data on instance var keys = Object.keys(data) var i, key i = keys.length while (i--) { key = keys[i] // there are two scenarios where we can proxy a data key: // 1. its not already defined as a prop // 2. its provided via a instantiation option AND there are no //