当你把一个普通的 JavaScript 对象传给 vue 实例的 data 选项,Vue 将遍历此对象所有的属性,并使用 Object.defineProperty 把这些属性全部转为 getter/setter.
用户是看不到 getter/setter,但是在内部它们让 Vue 追踪依赖,在属性被访问和修改时通知变化.
每个组件里都有一个 watcher 实例对象,它会在组件渲染时把属性依赖记录下来,当 setter 被调用时会通知 watcher 重新计算重新渲染页面.
vue 官网图例
检测数据的变化一定要注意,所要检测的数据必须在 data 对象存在,才能让 vue 转换到才能让它是响应的
而且 vue 还不能在已经被渲染的数据进行添加删除的改变,你必须手动的去做个操作才能做到响应(Vue.set 或 this.$set)
let ui = new Vue({ // 实例
data: {
return {
a: 1 // 能是响应的
}
}
}) ui.b = 1 // 不能响应
这样必须在有引入import vue的js文件里使用
<template>
{{a}}
<button @click="add">改变</button>
</template>
<script>
import Vue for 'vue'
export default {
data(){
return {
a:1 // 一开始值是1
}
},
methods:{
add(){ // 改变已被渲染上的数据
Vue.set(dataobj, 'a', 2) // dataobj是data上的对象或数组
}
}
})
</script>
或者可以用一下的方式
this.$set(dataobj, 'a', 2) // 也是全局 Vue.set 方法的别名
这种方式可以不受限制的在各个组件里使用
这样就可以做到把已经渲染好的列表或者,某个状态给动态的改变并重新渲染在页面上.
来源: http://www.jianshu.com/p/60a7788c4880