vue2-this.$set确保数据响应性的实例方法

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);  5.参考

详解vue2中的this.$set_vue2 this.$set-CSDN博客文章浏览阅读3.4k次，点赞5次，收藏18次。在 Vue.js 中，this.$set 是一个用于在响应式对象上设置属性的方法。它可以用于在 Vue 实例的数据对象或组件的响应式属性上添加新的属性，确保新添加的属性也是响应式的。其中，object 是要设置属性的对象，key 是要设置的属性名，value 是要设置的属性值。默认情况下，Vue.js 的响应式系统会在初始化时对数据对象进行递归地劫持，使其成为响应式的。这意味着当你直接给一个已经存在的属性赋值时，Vue 会自动检测到这个变化并更新视图。_vue2 this.$set blog.csdn.net/weixin_42289279/article/details/134004998?fromshare=blogdetail&sharetype=blogdetail&sharerId=134004998&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link