vue3监听响应式对象

### Vue 3 实现响应式对象的方法和原理 #### 方法一：通过 `reactive` 函数创建响应式对象 在 Vue 3 中，可以使用 Composition API 提供的 `reactive` 函数来创建一个响应式对象。这个函数接收一个普通 JavaScript 对象作为参数，并返回一个新的代理对象 (Proxy object)，该对象具有追踪其内部属性的能力。 ```javascript import { reactive } from 'vue'; const state = reactive({ count: 0, }); console.log(state.count); // 输出: 0 state.count++; console.log(state.count); // 输出: 1 ``` 当访问或修改这些属性时，Vue 能够自动检测到变化并更新视图[^1]。 #### 方法二：通过 `ref` 创建基本类型的响应式变量 除了复杂的嵌套对象外，Vue 3 还提供了 `ref` 函数用于定义简单的原始值（如字符串、数字等）成为响应式的引用类型。它会返回一个带有 `.value` 属性的对象，允许开发者显式地获取或设置当前持有的值。 ```javascript import { ref, watchEffect } from 'vue'; let counter = ref(0); watchEffect(() => { console.log(`The current value of the counter is ${counter.value}`); }); // The current value of the counter is 0. counter.value += 1; // The current value of the counter is 1. ``` 每当 `counter.value` 发生改变时，依赖它的副作用函数就会重新执行，从而触发相应的 UI 更新逻辑[^2]。 #### 原理解析 Vue 3 的响应式系统主要基于 ES6 引入的语言特性——`Proxy` 和 `Reflect` 构建而成。相比于 Vue 2 所使用的 `Object.defineProperty()` 方案，新的实现方式解决了许多旧版存在的局限性： - **全面覆盖属性变更**：不再局限于已知键名的操作监控，新增加或移除属性同样会被捕捉； - **数组变动感知**：不仅限于特定方法拦截，任何针对数组元素及其长度的变化都能被识别； - **简化深层监听开销**：无需再手动遍历子节点完成递归转换工作，整体效率更高且易于维护； - **增强用户体验**：去掉了诸如 `$set/$delete` 等特殊语法糖需求，使代码编写更为直观流畅[^4]。 综上所述，借助现代浏览器环境下的强大工具集，Vue 3 成功构建了一套既高效又易用的数据绑定框架，极大地方便了前端开发人员的工作流程。