Vue实例中的数据对象

1、数据对象

当一个Vue实例被创建时，它将 data 对象中的所有属性加入到Vue的响应式系统中。当这个属性的值发生改变时，视图将会产生“响应”，即匹配更新为新的值。

代码示例：

// 声明数据对象
var data = { 
    msg: "hello" 
}

// 该对象被加入到一个 Vue 实例中
var vm = new Vue({
  data: data
})

上面代码中，可以将我们声明的对象赋值到Vue实例中，使用 vm.msg == data.msg 比较时，结果为true。

当我们直接修改Vue实例中data属性的值，结果将会影响到原始数据对象，代码示例：

// 设置Vue实例中的属性会影响到原始数据
vm.msg = "hai"
data.msg // => hai

// ……反之亦然
data.msg = "hello world"
vm.msg // => hello world

只有当Vue实例被创建时就已经存在于data中的属性修改后才是响应式的，如果我们直接操作一个没有在Vue实例中定义的属性，或者是我们直接用赋值的形式为实例添加一个属性，例如：

var vm = new Vue({
	el: '#app',
	data: {
		msg: 'hello'
	}
})
			
vm.val = 'world';

上面代码中的，对 val 属性做修改不会触发任何视图的更新ÿ