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

前端页面仔

于 2025-06-27 02:13:56 发布

阅读量1k

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript react.js 前端框架开发语言 ecmascript

本文链接：https://blog.csdn.net/qq_44136882/article/details/148937310

在 Vue.js 开发中，this.$set() 是一个解决响应性问题的关键工具。本文将从基础使用到高级场景，全面解析这个方法的使用技巧和最佳实践。

为什么需要 `this.$set()`？——响应性原理的核心问题

Vue 的响应性系统无法检测对象属性的添加或删除，以及数组索引访问的变化。这是因为 Vue 2 使用 Object.defineProperty() 实现响应性，它存在以下限制：

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

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

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

这些情况下，视图不会自动更新，这时就需要 this.$set() 出马。

基本语法和参数解析

this.$set() 的完整语法如下：

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

target：要修改的目标对象或数组（必需）
propertyName/index：要添加或修改的属性名或数组索引（必需）
value：要设置的值（必需）

使用场景和示例

场景1：为响应式对象添加新属性

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 属性，视图会更新
    }
  }
}

场景2：修改数组指定索引的值

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

场景3：修改嵌套对象中的属性

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);
    }
  }
}

原理揭秘：`$set()` 背后的魔法

this.$set() 实际上是对全局 Vue.set() 方法的别名，其核心实现逻辑是：

判断目标是否是响应式对象
如果对象已有该属性：
- 直接更新值
- 触发相关依赖更新
如果对象没有该属性：
- 将新属性转为响应式
- 通知依赖更新
如果是数组且索引存在：
- 使用 splice 方法修改数组
- 触发数组更新检测

// 伪代码实现
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>

最佳实践与注意事项

避免不必要的使用：
- 已有属性可以直接修改：this.existingProp = newValue
- 数组元素修改尽量使用 push(), pop(), shift(), unshift(), splice() 等方法
性能考虑：
- 对大型对象深度使用 $set 可能有性能开销
- 批量更新时考虑使用 Object.assign() 创建新对象

替代方案：

// 使用新对象替换旧对象
this.user = {
  ...this.user,
  age: 30,
  title: 'Senior Developer'
};

// 对于数组
this.colors = this.colors.map((color, index) => 
  index === 1 ? 'purple' : color
);

Vue 3 的变化：
- Vue 3 使用 Proxy 解决响应性限制
- $set 在 Vue 3 中主要为兼容性保留
- 在 Vue 3 中可直接添加新属性：this.newProperty = value

常见问题解决方案

问题：使用 `$set` 后视图仍未更新？

解决方案：

确保在 Vue 实例方法中使用（生命周期钩子、方法等）
检查目标对象是否在 Vue 的响应系统中（data 返回或 Vue.observable 创建）
使用 this.$forceUpdate() 作为最后手段（不推荐）

问题：深度嵌套对象如何处理？

解决方案：

// 使用自定义工具方法
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');