Vue $set、$delete给对象动态添加，删除属性、并更新视图-响应式

林中明月间。

已于 2023-07-03 11:21:16 修改

阅读量1.8k

点赞数

分类专栏： Vue.js 文章标签： vue.js javascript 前端

于 2021-08-08 21:57:54 首次发布

原文链接：https://www.cnblogs.com/annie211/p/12654177.html

版权

Vue.js 专栏收录该内容

195 篇文章 21 订阅

订阅专栏

本文探讨了Vue中如何解决数据修改后视图不更新的问题，涉及使用$set方法处理非响应式对象属性、数组操作、Vue3.0 Proxy及对象定义。通过实例演示了如何添加和删除对象属性、处理数组变化，以及如何确保视图实时更新。

摘要由CSDN通过智能技术生成

vue数据更改视图不更新问题 - 代码先锋网

vue修改表格数据时视图没有更新

https://www.cnblogs.com/annie211/p/12654177.html

<button @click="addObjB"></button>
<button @click="deleteObjB"></button>
data:{
    obj:{
        a:''
    }
}

methods:{
    // 给对象添加一个属性
    addObjB(){
        this.$set(this.obj,'b',111)
    },
    // 给对象删除一个属性
    deleteObjB(){
        this.$delete(this.obj,'a')
    }
}

Vue 给数据加属性视图不更新解决

当Vue数组、对象改变的时候视图是不更新的，所以要把它变成响应式的数据方法如下↓

第一种情况：

基本数据类型和对象：实例化的时候如果没有被加入到data中，那么它就不是响应式属性，这时要添加新的根级响应式属性，可以使用

实例 后端返回过来的数据里面是没有"isTenantAdmin" 这个字段的，是前端给他加上去的，但是直接item.isTenantAdmin 视图是不更新的 所以需要把它变成响应式的数据 使用this.$set(),item1=>上一个数组的每一条数据添加

this.typeList.forEach(item1 => {
                  AlltenantArr.forEach(item2 => {
                    if (item1.tenantId == item2.tenantId && item2.isAdmin) {
                      this.$set(item1,'isTenantAdmin', true) //给租户数据集添加租户管理员字段-更新视图
                    } else {
                      this.$set(item1,'isTenantAdmin', false)
                    }
                  })
                })


给this.typeList的每一条数据添加一个"this.typeList" 属性并赋值

this.$set(this.obj, key , value); //添加一个属性

this.obj=Object.assign({},this.obj,{a:1,b:2}); //添加多个属性，必须要创建一个新的对象，让它包含原对象的属性和新的属性

第二种情况：

vue数据更改视图不更新问题 - 代码先锋网

数组（直接用索引值给数组某一项赋值；或者修改数组的长度）

var vm = new Vue({
    data:{
        list:['a','b','c']
    }
});
vm.list[1]='x'; //不是响应式的
vm.list.length=0; //不是响应式的

vm.$set(vm.list,1,'x') //响应式的 推荐
vm.list.splice(1,1,'x') //响应式的

splice（index,howmany,newValue1,newValue2）//从第几个开始 去除几个 用什么替换

解决方法：

1、this.$set(obj,obj.b,value) （手动的去把obj.b处理成一个响应式的属性）

2、this.$forceUpdate() //强制刷新视图，适用于数据层次太多的情况

3、this.$nextTick(function(){ }); //回调函数会在dom更新完后就会调用

Vue3.0 Object.defineProperty=>Proxy

Proxy：对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）

优点：比 Object.defineProperty有更丰富的api，更灵活

缺点：兼容性没那么好。

<body>
	<div id="app">
		<p>{{msg}}</p>
		<p>{{text}}</p>
		<p>{{text.c}}</p>
	</div>
	<script type="text/javascript">
	//调用Vue的静态方法(挂载在函数上的方法)set 添加
	//语法：Vue.set(target,prop,value) 目标，属性(index,key)，值
	//Vue.set(vm.text,'c','3')
	//调用实例上的方法$set 原型上的方法
	//vm.$set(vm.text,'c','3')
	//改写属性的值，重新赋值：vm.text = {c:'新值'} 原有的值会被替换
	//vm.text= {a:'1'} 就是相当于给vm,text这个对象添加一个属性
	// vm.text = Object.assign({},vm.text,{a:'1'})
	//删除元素 语法：Vue.$delete(target,prop,value) 目标，属性(index,key)，值
	//vm.$delete(this.datasj,key,'')
		let vm = new Vue({
			el:'#app',
			data:{
				msg:'hello',
				text:{
					c:3
				}
			}
		})
		Vue.set(vm.text,'c','3');调用Vue的静态方法
		//vm.$set(vm.text,'c','3');实例上的方法$set
		// vm.text= {a:'1'} 改写了内容
		// vm.text = Object.assign({},vm.text,{a:'1'}) 改写再合并
		console.log(vm.text)
	</script>
<!-- 数组响应数据变化 -->
	<div id="app">
		<p>{{list}}</p>
	</div>
	<script type="text/javascript">
	/*
	会改变原数组
	vm.list.push(10);
	不会改变原数组
	vm.list.map(item => item*3)
	vm.list = vm.list.map(item => item*3) 改
	*/
		let vm = new Vue({
			el:'#app',
			data:{
				list:[1,2,3]
			}
		})
		vm.list = vm.list.map(item => item*3);
		vm.list.splice(0,1,2)//改数组第一个
	</script>
</body>