从“对象监听”看VUE reactivity原理

Vue.js中的reactivity（响应式）系统是一个强大的工具，它允许我们在数据发生变化时自动更新UI。这使得VUE成为构建交互式和动态web应用程序的理想选择。

但是，VUE reactivity系统并不是万能的。它对对象和数组的变化是有限制的。在本文中，我们将探讨VUE中对象与数组监听的问题，并深入了解VUE reactivity原理，以便更好地理解如何使用VUE。

问题起源

这个问题起源于最近的生产项目，父组件向子组件传递一个Object数据，因为这个Object数据太多，于是我“偷懒”了一下，在子组件的data中直接将父组件传递过来的对象进行了赋值，如下代码：

// 父组件
<template>
  <Child :data="data" />
</template>

<script>
  export default {
    data() {
      return {
        data: {
          name: 'John',
          age: 30,
          address: '123 Main Street'
        }
      }
    }
  }
</script>

// 子组件
<template>
  <p>{{ data.name }}</p>
  <p>{{ data.age }}</p>
  <p>{{ data.address }}</p>
</template>

<script>
  export default {
    props: ['data'],
    data() {
      return {
        data: this.data
      }
    }
  }
</script>

当我运行这个程序时，我发现子组件中的data并没有被更新。我花了很长时间才意识到，这是因为VUE reactivity系统无法监听对象的变化。

VUE reactivity原理

为了理解为什么VUE reactivity系统无法监听对象的变化，我们需要深入了解VUE reactivity原理。

VUE reactivity系统是通过getter/setter来实现的。当我们访问一个响应式对象或数组的属性时，VUE reactivity系统会创建一个getter函数。当我们修改一个响应式对象或数组的属性时，VUE reactivity系统会创建一个setter函数。

当一个响应式对象或数组的属性被访问时，getter函数会被调用。getter函数会返回该属性的值。当一个响应式对象或数组的属性被修改时，setter函数会被调用。setter函数会设置该属性的新值。

VUE reactivity系统还会创建一个观察者对象。观察者对象会监听getter函数和setter函数的调用。当getter函数或setter函数被调用时，观察者对象会通知VUE reactivity系统，VUE reactivity系统会更新UI。

对象和数组监听的问题

VUE reactivity系统对对象和数组的变化是有限制的。VUE reactivity系统只能监听对象和数组的属性的变化，而不能监听对象和数组本身的变化。

这意味着，如果我们直接将一个对象或数组赋值给一个响应式变量，VUE reactivity系统将无法监听该对象或数组的变化。

解决方案

为了解决这个问题，我们可以使用VUE.set()方法来设置一个响应式变量的值。VUE.set()方法可以监听对象和数组的变化。

this.$set(this.data, 'name', 'Jane')

使用VUE.set()方法来设置一个响应式变量的值后，VUE reactivity系统将能够监听该对象或数组的变化。

总结

本文通过对VUE中对象与数组监听问题的剖析，深入浅出地讲解了VUE reactivity原理，帮助读者理解VUE是如何实现响应式系统的，以及如何在VUE中正确监听对象与数组的变化。