var data = { a: 1 }
var vm = new Vue({
data: data
})
vm.a == data.a
// 设置属性也会影响到原始数据
vm.a = 2
data.a // => 2
// ……反之亦然
data.a = 3
vm.a // => 3
当值发生改变的时候,会自动发生渲染,值得注意的是只有当实例被创建时 data 中存在的属性才是响应式的。也就是说如果你添加一个新的属性,它不属于 data 中预定义好的,那么不会发生重新渲染,所以对于要使用的属性,最开始在 data 属性中预定义
除了数据属性,Vue 实例还暴露了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。例如:
var data = { a: 1 }
var vm = new Vue({
el: '#example',
data: data
})
vm.$data === data // => true
vm.$el === document.getElementById('example') // => true
// $watch 是一个实例方法
vm.$watch('a', function (newValue, oldValue) {
// 这个回调将在 `vm.a` 改变后调用
})
生命周期钩子的 this 上下文指向调用它的 Vue 实例。