vue判断数据是对象_Vue 响应式系统（一）- 实例对象代理访问数据

关于Vue的响应式系统在近几年已经被无数的人提及过。 为了避免炒剩饭从本章开始我们将以源码级的角度分析Vue响应式更新过程每个细节点。

定位initState函数

function initState(vm) {

vm._watchers = [];

var opts = vm.$options;

if (opts.props) {

initProps(vm, opts.props);

}

if (opts.methods) {

initMethods(vm, opts.methods);

}

if (opts.data) {

initData(vm);

} else {

observe(vm._data = {}, true /* asRootData */ );

}

if (opts.computed) {

initComputed(vm, opts.computed);

}

if (opts.watch && opts.watch !== nativeWatch) {

initWatch(vm, opts.watch);

}

}

initState 函数是很多选项初始化的汇总，在 initState 函数内部使用 initProps 函数初始化props 属性；使用 initMethods 函数初始化 methods 属性；使用 initData 函数初始化 data选项；使用 initComputed 函数和 initWatch 函数初始化 computed 和 watch 选项。 为了内容更加符合标题，接下来以 initData 为切入点为大家讲解 Vue 的响应系统。

如下是 initState 函数中用于初始化 data 选项的代码：

if (opts.data) {

initData(vm);

} else {

observe(vm._data = {}, true /* asRootData */ );

}

在此判断 opts.data 是否存在，即 data 选项是否存在，如果存在则调用 initData(vm) 函数初始化 data 选项，否则通过 observe 函数观测一个空的对象，并且 vm._data 引用了该空对象。其中 observe 函数是将 data 转换成响应式数据的核心入口。

由于没有先讲Vue中的选项合并处理，在此还是给大家解释下。 opts.data是否有值取决你是否有定义data 选项。

如下：

var vm = new Vue({

el: "app",

data: {

message: "this is test code "