vue实时监控mysql数据变化_web前端vue：如何追踪数据（data里）变化实时渲染

当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。

用户是看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

每个组件里都有一个watcher 实例对象，它会在组件渲染时把属性依赖记录下来，当setter被调用时会通知 watcher 重新计算重新渲染页面。

vue官网图例

检测数据的变化一定要注意，所要检测的数据必须在data对象存在，才能让vue转换到才能让它是响应的

let ui = new Vue({ // 实例

data:{

return {

a:1 // 能是响应的

}

}

})

ui.b = 1 // 不能响应

而且vue还不能在已经被渲染的数据进行添加删除的改变，你必须手动的去做个操作才能做到响应(Vue.set或this.$set)

{{a}}

改变

import Vue for 'vue'

export default {

data(){

return {

a:1 // 一开始值是1

}

},

methods:{

add(){ // 改变已被渲染上的数据

Vue.set(dataobj, 'a', 2) // dataobj是data上的对象或数组

}

}

})

这样必须在有引入import vue的js文件里使用

或者可以用一下的方式

this.$set(dataobj,'a',2) // 也是全局 Vue.set 方法的别名

这种方式可以不受限制的在各个组件里使用

这样就可以做到把已经渲染好的列表或者，某个状态给动态的改变并重新渲染在页面上。

下一章将为大家讲如何，自动检测页面上的数据或状态的改变再做出其它的处理。

有不懂的朋友或喜欢vue的可以加我微信(nihaomeili87)我们一起进步！等你噢～