vue改变对象的属性值，视图未更新

最新推荐文章于 2023-04-23 11:35:39 发布

原创最新推荐文章于 2023-04-23 11:35:39 发布 · 置顶 · 2.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#改变对象属性 #视图未更新 #set #vue #响应式

vue 专栏收录该内容

15 篇文章

订阅专栏

探讨Vue中对象属性及数组变化的响应性问题，解释为何动态添加的属性不触发视图更新，以及如何通过Vue.set或$set方法解决。

我建立了一个对象，视图中遍历这个对象，并显示这个值,然后有个按钮，可以改变obj对象的值

<li v-for="(items,index) in obj" :key="index" >{{items}}</li>
<button @click="btn">添加obj.b</button>

<script>
	export default:{
	data(){
		return:{
			obj:{
				'a':'aaa'
			}
		}
	},
	methods:{
		btn(){
			this.obj.b = 'bbb'
			console.log('obj的属性会改变，但是视图不会更新')
		}
	}
}

//原因在于在Vue实例创建时， obj.b 并未声明，因此就没有被Vue转换为响应式的属性，
自然就不会触发视图的更新，由于 Vue 会在初始化实例时对属性执行 getter/setter 转化过程，
所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的。这时就需要使用Vue的全局api—— $s e t () ：或者我们在 v u e 实例创建前给 o b j 定义一个 o b j . b 属性, 这样就会被 v u e 加入响应中或者可以使用 v u e .$ set()方法，给对象设置属性，会自动加入相应中
//Vue,$set方法（向对象添加一个属性）
在btn(){

		this.$set(this.obj,'a','bbb')  //set语法  target响应的对象    key:对象需要监控的键的名称  value 属性值，
	}

//由于js的限制，vue不能检测以下数组的变化:
1.当你利用索引直接设置一个数组项时，vm.items[index] = newValue
2.当你修改数组的长度时，vm.items.length = newLength
data:{
items:[‘a’,‘b’,‘c’]
}
vm.items[1] = ‘x’ //不是响应的
vm.items.length = 2 //不是响应的

//解决响应
Vue.set(vm.items,index,newValue)
vm.$set(vm.items,index,newValue)
//主要是用来解决vue无法检测到对象中新增的property