vue3对象属性改变

随着vue3正式发布，开发者们迫不及待地开始尝试新版本带来的新功能和改进。其中一个最引人注目的变化是对象属性的改变。在vue2中，我们要想监听对象属性的改变，需要使用深度观察或者使用$watch来手动监听属性的变化。然而，在vue3中，这个问题已经被解决了。

Vue3通过使用Proxy对象，为对象属性的改变提供了自动监听和响应的机制。这意味着，我们可以像操作普通的JavaScript对象一样操作Vue3中的对象，并且可以自动触发视图的更新。

让我们来看一下具体的实现细节。

首先，假设我们有一个Vue3组件，内部包含一个状态对象，并且我们想要监听该对象属性的变化。我们可以定义这个对象并将其赋值给组件的状态：

<template>  <div>    <p>属性A: {{ obj.A }}</p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>    <p>属性B: {{ obj.B }}</p>  </div></template><script>export default {  data() {    return {      obj: {        A: '初始值A',        B: '初始值B'      }    }  }}</script>

在Vue2中，如果我们想要监听该对象属性的变化，需要使用$watch或$watchEffect来手动监听每一个属性的变化。例如：

this.$watch('obj.A', (newValue, oldValue) => {  console.log(`属性A发生了变化：${oldValue} => ${newValue}`)})

在Vue3中，我们可以使用Proxy对象来监听目标对象的所有属性变化而无需编写$watch或$watchEffect：

<script>export default {  data() {    return {      obj: {        A: '初始值A',        B: '初始值B'      }    }  },  created() {    this.obj = new Proxy(this.obj, {      set(target, key, value, receiver) {        // 触发视图更新        return Reflect.set(target, key, value, receiver)      }    })  }}</script>

我们在组件创建时，将状态对象包装成Proxy对象。当我们修改该对象属性时，Proxy对象会自动触发视图的更新。

Proxy对象的set函数会在对象属性被修改时自动调用。此时，我们可以在set函数中添加自己的逻辑，例如打印出属性的变化或者通知其他组件等操作。但是，必须确保在最后返回Reflect.set(target, key, value, receiver)语句，这样控制流程才会返回到Vue更新机制中，并正确更新视图。

上述例子中只是一个简单的演示，Vue3的Proxy对象实现了更多的特性和选项，用于更为灵活的对象属性监听，包括自定义getter和setter、验证属性权限等。有兴趣的开发者可以参考Vue3的官方文档进行深入学习。

总之，Vue3的Proxy对象让我们能够更加自然地操作组件内部的对象，同时也减少了繁琐的手动监听属性变化的代码量。这为我们的开发带来了更高效、更方便的体验。