Vue 数据响应式

数据响应式是什么

用一段简单的代码理解 Vue 的数据响应式：

const vm = new Vue({
  data: {
    n: 0
  },
  template: '<div>{
  { n }}</div>'
})
setTimeout(()=>{
  vm.n += 10
  // 修改 vm.n，UI 中的 n 会随着改变
},3000)

一句话概括，即：

当你修改 Vue 中的数据模型时，视图会自动进行更新。

原理

const vm = new Vue({data: myData})

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

这样 Vue 就能让 vm 成为 myData 的代理（proxy），对 myData的所有属性进行监控。

一旦 myData 的属性变了，Vue 就可以通知视图自动更新。

使用时的注意事项

由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。

对象

1. 由于 Vue 通过Object.defin