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）

<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>
这样必须在有引入import vue的js文件里使用

或者可以用一下的方式

this.$set(dataobj,'a',2) // 也是全局 Vue.set 方法的别名
这种方式可以不受限制的在各个组件里使用

这样就可以做到把已经渲染好的列表或者，某个状态给动态的改变并重新渲染在页面上。
下一章将为大家讲如何，自动检测页面上的数据或状态的改变再做出其它的处理。
有不懂的朋友或喜欢vue的可以加我微信（nihaomeili87）我们一起进步！等你噢～