1.前言
在 Vue.js 2 中，this.$set 是一个用于确保数据响应性的实例方法。它主要用于解决 Vue 2 响应式系统的局限性，即无法自动检测对象属性的动态添加或数组索引的直接修改。
2.问题
父组件后端请求获取动态数据
this.uploadData[op.field] = op.fieldValue
子组件获取使用校验号码时未校验到输入的值，数据未进行响应式绑定。
<a-form-model-item v-if="peo.field=='certificate_no'" :label="peo.fieldName" :prop="peo.field">
<a-input v-model="uploadData[peo.field]" placeholder="请输入号码" @change="changeData()"/>
</a-form-model-item>
props: {
fieldList: {
type: Array,
default:[]
},
}
3 解决
this.$set(this.uploadData, op.field, op.fieldValue) 4.this.$set
Vue 2 使用 Object.defineProperty 实现响应式数据。但这种方式存在以下限制
对象属性动态添加：初始化时未定义的属性无法自动成为响应式。
data() {
return { user: { name: "Alice" } };
},
methods: {
addAge() {
this.user.age = 25; // 非响应式，视图不会更新！
}
}数组索引的直接修改
this.items[0] = newValue; // 非响应式，视图不会更新！this.$set 强制让 Vue 追踪新属性或数组索引的变化，并触发视图更新。
语法
this.$set(target, propertyName/index, value);object 是要设置属性的对象，key 是要设置的属性名，value 是要设置的属性值。
4.1this.$set使用场景
4.1.1对象添加新属性
// 错误：直接添加属性，视图不更新
this.user.age = 25;
// 正确：使用 this.$set
this.$set(this.user, 'age', 25); // 响应式更新4.1.2修改数组某一项
// 错误：直接通过索引修改
this.items[0] = 'new value';
// 正确：使用 this.$set
this.$set(this.items, 0, 'new value'); // 视图更新4.1.3修改数组长度
// 错误：直接修改数组长度
this.items.length = 0; // 视图不更新！
// 正确：使用 splice
this.items.splice(0); // 响应式更新4.1.4Vue.set与this.$set关系
this.$set 是实例方法，Vue.set 是全局方法，两者功能一致：
// 全局方法
Vue.set(this.user, 'age', 25);
// 实例方法（组件内更方便）
this.$set(this.user, 'age', 25);