探索 Vue 3 响应式系统：原理与实践

Vue 3 响应式系统凭借 Proxy 的优势，提供更强大、灵活的响应式方案。理解其原理与 API，能写出更高效、可维护的 Vue 应用。不断探索其细节，是进阶 Vue 开发的关键。

探索 Vue 3 响应式系统：原理与实践

Vue 3 的响应式系统是其核心亮点，相比 Vue 2 有重大升级。本文深入剖析其原理与常用实践，助你掌握 Vue 3 开发精髓。

一、从 Object.defineProperty 到 Proxy

Vue 2 使用 Object.defineProperty 实现响应式，但存在缺陷，如无法检测数组长度变化、对象新增属性不响应。Vue 3 改用 Proxy，它直接代理对象，能捕获更多操作，例如：

const state = { count: 0 };  
const proxy = new Proxy(state, {  
  get(target, key) {  
    console.log(`getting ${key}`);  
    return target[key];  
  },  
  set(target, key, value) {  
    console.log(`setting ${key} to ${value}`);  
    target[key] = value;  
    return true;  
  }  
});  
proxy.count = 1; // 触发日志：setting count to 1  

Proxy 提供了更高效、全面的响应式处理，解决了 Vue 2 的局限性。

二、响应式 API 解析

1. reactive

创建对象的响应式副本：

import { reactive } from 'vue';  
const state = reactive({ count: 0 });  
state.count++; // 触发视图更新  

2. ref

让基本类型数据响应式：

import { ref } from 'vue';  
const count = ref(0);  
console.log(count.value); // 0  
count.value++;  

3. readonly/shallowReactive

readonly 创建不可变的响应式对象，shallowReactive 只浅层响应：

import { readonly, shallowReactive } from 'vue';  
const state = reactive({ nested: { count: 0 } });  
const readOnlyState = readonly(state);  
readOnlyState.nested.count = 1; // 错误，readonly 不可变  

const shallowState = shallowReactive({ nested: { count: 0 } });  
shallowState.nested.count = 1; // 不触发响应（浅层代理）  

三、响应式系统在组件中的应用

在 Vue 3 组件中，响应式数据自动追踪：

import { defineComponent, ref } from 'vue';  
export default defineComponent({  
  setup() {  
    const count = ref(0);  
    const increment = () => {  
      count.value++;  
    };  
    return { count, increment };  
  }  
});  

模板中 {{ count }} 会随 count.value 的变化而更新，无需额外操作。

四、调试与优化

利用 Vue Devtools 查看响应式依赖，避免对大数组或无需响应式的数据使用 reactive，以提升性能。例如，静态数据可直接使用普通对象，减少响应式开销。