Vue3中的响应式属性枚举与总结

Vue3 的响应式系统基于 Proxy API 重构，响应式属性的覆盖范围更广且更智能，主要包括以下场景：

1. reactive() 包裹的对象
2. ref() 创建的包装值（包括基本类型）
3. computed() 生成的派生值
4. props 接收的父组件数据
5. 通过响应式 API 动态添加的属性

---

一、核心响应式属性详解

1. reactive() 包裹的对象

• 实现原理：通过 Proxy 代理对象，递归劫持所有层级的属性读写操作。
• 特性：
  • 动态属性响应：直接添加新属性（如 obj.newKey = 1）自动触发响应。
  • 深层嵌套响应：嵌套对象或数组无需手动处理，默认深度响应。
• 示例：

  const state = reactive({
        
    count: 0,
    user: {
        name: 'Alice' } // 嵌套对象自动响应
  });
  state.user.age = 20; // 动态添加属性，自动触发更新
  

2. ref() 创建的值

• 设计目的：包装基本类型࿰