Vue中的this.$set()使用方法详解(一文搞懂)

// 对象属性添加问题
const obj = { name: 'John' };
this.person = obj;

// 添加新属性 - Vue 无法检测
this.person.age = 30; // ❌ 非响应式

// 数组索引修改问题
this.numbers = [1, 2, 3];
this.numbers[1] = 99; // ❌ 非响应式

this.$set(target, propertyName/index, value)

export default {
  data() {
    return {
      user: {
        name: 'Alice',
        email: 'alice@example.com'
      }
    }
  },
  methods: {
    addUserAge() {
      // 错误方式 ❌
      // this.user.age = 25; // 视图不会更新
      
      // 正确方式 ✅
      this.$set(this.user, 'age', 25);
      
      // 验证
      console.log(this.user); // 包含 age 属性，视图会更新
    }
  }
}

export default {
  data() {
    return {
      colors: ['red', 'green', 'blue']
    }
  },
  methods: {
    updateColor(index, newColor) {
      // 错误方式 ❌
      // this.colors[index] = newColor; // 视图不会更新
      
      // 正确方式 ✅
      this.$set(this.colors, index, newColor);
    }
  }
}

export default {
  data() {
    return {
      company: {
        name: 'TechCorp',
        departments: {
          engineering: {
            manager: 'John',
            size: 50
          }
        }
      }
    }
  },
  methods: {
    updateManager(name) {
      // 为嵌套对象添加新属性
      this.$set(this.company.departments.engineering, 'manager', name);
      
      // 修改已有属性（等效直接赋值但确保响应性）
      this.$set(this.company.departments.engineering, 'size', 55);
    }
  }
}

// 伪代码实现
function set(target, key, val) {
  // 如果是数组且索引有效
  if (Array.isArray(target) && isValidArrayIndex(key)) {
    target.length = Math.max(target.length, key);
    target.splice(key, 1, val);
    return val;
  }
  
  // 如果对象已存在该属性
  if (key in target && !(key in Object.prototype)) {
    target[key] = val;
    return val;
  }
  
  // 获取目标对象的观察者实例
  const ob = target.__ob__;
  
  // 如果是非响应式对象，直接赋值
  if (!ob) {
    target[key] = val;
    return val;
  }
  
  // 将新属性转为响应式
  defineReactive(ob.value, key, val);
  
  // 通知依赖更新
  ob.dep.notify();
  return val;
}

<template>
  <div>
    <div v-for="(field, index) in dynamicForm" :key="index">
      <input v-model="field.value" :placeholder="field.placeholder">
      <button @click="removeField(index)">Remove</button>
    </div>
    <button @click="addField">Add Field</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dynamicForm: []
    }
  },
  methods: {
    addField() {
      const newIndex = this.dynamicForm.length;
      
      // 使用 $set 确保新字段响应式
      this.$set(this.dynamicForm, newIndex, {
        value: '',
        placeholder: `Field ${newIndex + 1}`
      });
    },
    removeField(index) {
      // 使用 splice 确保响应式
      this.dynamicForm.splice(index, 1);
    }
  }
}
</script>

<template>
  <div>
    <div v-if="user.permissions.viewSalary">
      <p>Salary: {{ user.salary }}</p>
    </div>
    <button @click="grantSalaryAccess">Grant Salary Access</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      user: {
        name: 'Bob',
        permissions: {
          viewSalary: false
        }
      }
    }
  },
  methods: {
    grantSalaryAccess() {
      // 1. 添加权限属性
      this.$set(this.user.permissions, 'viewSalary', true);
      
      // 2. 添加工资字段（不会暴露给没有权限的用户）
      setTimeout(() => {
        // 使用 $set 确保响应式
        this.$set(this.user, 'salary', 8500);
      }, 1000);
    }
  }
}
</script>

// 使用自定义工具方法
setNestedProperty(obj, path, value) {
  const keys = path.split('.');
  const lastKey = keys.pop();
  let current = obj;
  
  keys.forEach(key => {
    if (!current[key]) this.$set(current, key, {});
    current = current[key];
  });
  
  this.$set(current, lastKey, value);
}

// 使用示例
this.setNestedProperty(this.app, 'settings.theme.color', 'dark-blue');