Hello! My name is {{ person.name }}. I'm {{ person.age }} years old.
   Add "age" property   
Here are my favorite activities:
   
            {{ item }}       Edit        
   Clear the activities list 

el: '#app',   data: {     person: {       name: "David"     },     activities: [       "Reading books",       "Listening music",       "Watching TV"     ]   },   methods: {      // 1. Add a new property to an object     addAgeProperty() {       this.person.age = 30     },     // 2. Setting an array item by index     editActivity(index) {       const newValue = prompt('Input a new value')       if (newValue) {         this.activities[index] = newValue       }     },     // 3. Modifying the length of the array     clearActivities() {        this.activities.length = 0      }   } });

在上面的示例中，我们会发现这三种方法都不起作用。我们不能向该person对象添加新属性，无法使用activities的索引来编辑数组中的项目，也不能修改activities数组的长度。

优化如下：

el: '#app',   data: {     person: {       name: "David"     },     activities: [       "Reading books",       "Listening music",       "Watching TV"     ]   },   methods: {      // 1. Adding a new property to the object     addAgeProperty() {       Vue.set(this.person, 'age', 30)     },     // 2. Setting an array item by index     editActivity(index) {       const newValue = prompt('Input a new value')       if (newValue) {         Vue.set(this.activities, index, newValue)       }     },     // 3. Modifying the length of the array     clearActivities() {        this.activities.splice(0)     }   } });

在此示例中，我们用Vue.setAPI方法将新age属性添加到person对象，并从活动数组中选择/修改特定项目。在最后一种情况下，使用JavaScript内置splice方法。

这个做法完全可行但却略显笨拙，而且会导致前后代码不一致。而Vue 3就解决了这个问题。

我们用下面示例继续看：

data() {     return {       person: {         name: "David"       },       activities: [         "Reading books",         "Listening music",         "Watching TV"       ]     }   },   methods: {      // 1. Adding a new property to the object     addAgeProperty() {       this.person.age = 30     },     // 2. Setting an array item by index     editActivity(index) {       const newValue = prompt('Input a new value')       if (newValue) {         this.activities[index] = newValue       }     },     // 3. Modifying the length of the array     clearActivities() {        this.activities.length = 0      }   } }  Vue.createApp(App).mount('#app')

可以看到在Vue 3中，所有方法都可以正常工作。

在Vue 2.6中，引入的Vue.observable API方法，一定程度的公开了响应式系统，使开发人员可以体验到响应式系统的内容。实际上，这和Vue内部用来包装data对象是完全相同的方法，对于在简单场景创建小的跨组件状态存储很有用。但依旧没办法和Vue3的响应式系统相比，接下来就为大家详细介绍。

注意：由于Object.defineProperty方法是仅限ES5且不可调整的功能，因此Vue 2不支持IE8及以下版本。

Vue 3响应式系统如何工作

为了充分利用ES6 Proxy and Reflect API ，Vue 3中的响应式系统已被完全重写。新版本新增响应式API，该API使系统比以前更加灵活和强大。

Proxy API允许开发人员拦截和修改目标对象上的更低级对象操作。代理（proxy）是对象的克隆/包装（clone/wrapper），并提供特殊功能（称为target），这些功能响应特定的操作并覆盖JavaScript对象的内置行为（称为traps）。如果仍然需要使用默认行为，则可以使用相应的Reflection API，其名称顾名思义就是反映Proxy API的方法。这里有一个示例，用来了解如何在Vue 3中使用这些API：

name: "David",   age: 27 };  const handler = {   get(target, property, receiver) {     // track(target, property)     console.log(property) // output: name     return Reflect.get(target, property, receiver)   },   set(target, property, value, receiver) {     // trigger(target, property)     console.log(`${property}: ${value}`) // output: "age: 30" and "hobby: Programming"     return Reflect.set(target, property, value, receiver)   } }  let proxy = new Proxy(person, handler);     console.log(person)  // get (reading a property value) console.log(proxy.name)  // output: David  // set (writing to a property) proxy.age = 30;  // set (creating a new property) proxy.hobby = "Programming";  console.log(person)

要创建一个新的代理，使用new Proxy(target, handler)构造函数。它带有两个参数：目标对象（person对象）和处理程序对象，该对象定义将拦截哪些操作（get和set操作）。在handler对象中， get和set陷阱来跟踪何时读取属性以及何时修改/添加属性。设置控制台语句以确保运行正确。

在get和set陷阱采用下列参数：

• target：代理包装的目标对象

• property：属性名称

• value：属性值（此参数仅用于设置操作）

• receiver：进行操作的对象（通常是代理）

• Reflect API方法与其相应的代理方法接受相同的参数

注释中track函数和trigger函数特定用于Vue，用于跟踪何时读取属性以及何时修改/添加属性。

在示例的最后一部分，用控制台语句输出原始person对象。然后用另一份声明中读取属性name的proxy对象。接下来，修改age属性并创建一个新hobby属性。最后，再次输出该对象以查看它是否正确更新。

以上就是Vue3响应式系统的完整工作流程，但在实际工作中会复杂得多。

使用Vue 3响应式系统，还有一些注意事项：

• 仅适用于支持ES6 +的浏览器

• 响应代理不等于原始对象

看完上述内容，你们掌握什么是Vue响应式系统的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联行业资讯频道，感谢各位的阅读！