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

Vue2 中响应式属性的核心是 通过 Object.defineProperty 实现数据劫持，响应式属性包括：

1. data 中初始化的属性
2. props 接收的父组件数据
3. 通过 Vue.set 或 this.$set 动态添加的属性
4. 部分数组操作触发的响应式更新（需使用 Vue 包裹的变异方法）

---

一、核心响应式属性详解

1. data 中初始化的属性

• 实现原理：Vue2 在初始化时，对 data 返回的对象递归调用 Object.defineProperty，将属性转为 getter/setter。
• 示例：

  data() {
       
    return {
       
      message: 'Hello', // 响应式
      user: {
        name: 'Alice' } // 嵌套对象属性默认递归响应化
    };
  }
  

• 限制：
  • 动态添加的属性：直接通过 this.user.age = 20 添加属性，默认非响应式（需用 Vue.set）。
  • 数组索引操作：直接通过下标修改数组元素（如 this.list[0] = 'x