Vue.set Vue.delete

我们在使用vue更新对象或者数组时,常常会遇到明明值已经更新了,但是视图确没有更新,接下来我们将解决一下这个问题

1.Vue.set

• 向响应式对象中添加一个property,并确保这个新的property同样是响应式的,且触发视图更新.

Vue.set(target, propertyName/index,value);
参数说明:
 {Object | Array} target 
 {string | number} propertyName/index
 {any} value

第一个小demo 更新对象的属性

// html
<p>礼物介绍{{gift}}</p>
<p @click="getPrice">点击查看实时价格</p>
// vue数据
data: {
    gift: {
        name: '玫瑰一束',
    },
}
// vue点击事件
getPrice() {
    // this.gift.price = '100块' 错误的哦
    // console.log(this.gift)
    // 输出{name: "玫瑰一束",price: "100块"}但是视图并没有更新 错误的哦
    Vue.set(this.gift, 'price', '100块'); //此时视图更新了 正确的哦
}

第二个小demo 更新数组

// html部分
<p>礼物介绍{{list}}</p>
<p @click="getPrice">点击查看实时价格</p>
// vue数据部分
list: [{
    name: '玫瑰一束'
}, {
    name: '零食一包'
}]
// vue点击事件
getPrice() {
    this.list.forEach(function (item, index) {
        item.price = '100块'; // 视图没有更新
        vm.list[index].price = '200块' // 视图还是没有更新
        Vue.set(vm.list, index, item) // 视图更新了 正确的哦
    });
    console.log(this.list);
}

Vue.delete

• 删除对象的property,并确保视图更新

 Vue.delete(target, propertyName/index)
 参数说明:
    {Object | Array} target
    {string | number} peopertyName/index

删除属性的小demo

delPrice(){
    Vue.delete(this.gift, 'price');
    this.list.forEach(function (item,index){
        Vue.delete(item,'price')
    });
}