Vue 数据响应式

理解数据响应式

在Vue中，数据响应式是指Vue将数据对象进行了“代理”，当数据发生变化时，Vue能够自动检测到更新并同步到对应的视图上，使得视图和数据保持同步，从而不需要手动操作DOM元素。

Vue实现数据响应式的方式有两种： Vue 2: Object.defineProperty 和 Vue 3: Proxy，这里说明 Object.defineProperty 的实现方法。

在Vue中，当我们实例化Vue类时传入的data对象就会被Vue进行数据代理处理，就是把这个对象的所有属性都使用 Object.defineProperty 进行了劫持，从而可以监听到数据的变化。

例如在下面的Vue实例中：

const vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

如果我们改变 vm.message 的值，Vue会自动检测到数据的变化，并通知所依赖这个数据的组件进行更新。

这个检测数据变化的机制，就是 Vue 内部所实现的数据观测机制。它会追踪数据和依赖，并在数据被修改时告诉依赖它的组件去更新。

Object.defineProperty

• 可以给对象添加属性 value
• 可以给对象添加 getter/ setter
• getter / setter 用于对属性的读写进行监控

什么是代理(设计模式)

• 对myData对象属性读写，全权由另一个对象负责
• 那么vm就是myData的代理
• 比如 myData.n 不用， 偏要用 vm.n 来操作 myData.n

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

• 会让vm成为myData的代理 (proxy)
• 会让myData的所有属性进行监控
• 为什么要监控，为了防止myData的属性变了， vm不知道
• vm知道又如何？ 知道属性变了就可以调用render(data)
• UI = render(data)