vue 中的Vue.set 和 this.$set 的区别

Posted 2023-05-06

参考技术A 2019年8月14号上午，有个需求为，根据点击的按钮 联动一个下拉列表，如，点击“全部”,下拉列表显示所有的选项，点击“待申请”，下拉列表显示 待申请的选项。

想要改变vue中数组，并且被实时自动检测数组的变动，且渲染页面。就用Vue的set方法

受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在 data 对象上才能让 Vue.js 转换它，才能让它是响应的。

有，Vue.set 和this.$set 两种方法，

例子：

1.Vue.set 可以设置实例创建之后添加的新的属性，（在data里未声明的属性），而。this.$set只能设置实例创建后存在的属性。

Vue.set(target，key，value)

target:目标数组，可是Object可是Array，

key:要改变的属性，可为string，可为number

value:any

返回值：设置的目标

Vue.set()和this.$set()介绍

文章目录

• • 1.场景
  • 2.使用
  • • 2.1 `this.$set()`
    • 2.2 `Vue.set()`

1.场景

当生成Vue实例之后，再次给数据赋值或者新增数据对象属性时，数据可以正常改变，但是视图不会更新。

data () {
  return {
    student: {
      name: '',
      sex: ''
    }
  }
}
mounted () { // ——钩子函数，实例挂载之后
  this.student.age = 24
}


// 数据能够正常更新 但是不会触发视图更新

2.使用

2.1 this.$set()

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。

mounted () {
  this.$set(this.student,"age", 24)
}

// 视图能够正常完成更新

2.2 Vue.set()

Vue 不允许动态添加根级响应式属性。

const app = new Vue({
  data: {
    a: 1
  }
  // render: h => h(Suduko)
}).$mount('#app1')

Vue.set(app.data, 'b', 2)

// 报错 

//  使用Vue.set()方法向嵌套对象添加响应式属性

var vm=new Vue({
    el:'#test',
    data:{
        //data中已经存在info根属性
        info:{
            name:'小明';
        }
    }
});
//给info添加一个性别属性
Vue.set(vm.info,'sex','男');


// 视图能够正常完成更新