0
点赞
收藏
分享

微信扫一扫

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','男');


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


举报

相关推荐

0 条评论