当前位置：首页 > news >正文

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

news 来源：原创 2025/5/14 22:20:16

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.1`this.$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.4`Vue.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.$sethttps://blog.csdn.net/weixin_42289279/article/details/134004998?fromshare=blogdetail&sharetype=blogdetail&sharerId=134004998&sharerefer=PC&sharesource=2301_76671906&sharefrom=from_link