Vue进阶之路之$set的理解

本文探讨Vue中遇到的对象属性动态添加时视图未更新的问题。由于Vue无法检测对象属性的添加,导致预期效果无法实现。$set是解决这个问题的关键,它用于确保属性的变化能够触发视图更新。同时,简要介绍了Vue的生命周期。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

$set 的深入理解

众所周知,Vue 双向数据绑定的原理是通过遍历data属性,利用Object.definePrototype将其转化成setter/getter,但是由于现代js的限制以及object.observe的限制,vue无法检测到对象属性的添加或删除。具体场景如下

<template>
	<ul>
		<li v-for='(item,key) in list' :key="item.id" @click="clicks(item)" :class="item.checked==='0'?'red':'blue'">{{item.name}}</li>
	</ul>
</template>
<script>
export default {
	name:"按钮",
	data(){
		return{
			list:[
				{name:"按钮1",id:1,checked:1},
				{name:"按钮2",id:2,checked:1},
				{name:"按钮3",id:3,checked:1},
				{name:"按钮4",id:4,checked:1},
			]
		}
	},
	
	methods:{
		clicks(item){
			item.checked = "0";
		}
	}
}
</script>
<style scoped>
.red{
	background:red;
}
.blue{
	background:blue;
}
</style>
以上代码预计实现的效果是 点击对应的 li 颜色 发生变化。但是,实际点击的时候并没有用,将item 输出,checked确实发生变化
原因在于—Vue 不能检测到对象属性的添加或删除

在这里 再啰嗦一下Vue的生命周期都干了些什么事

beforeCreate  数据还没有挂载,只是一个空壳,无法访问数据和dom,一般不做操作 
				//console.log(this.list)  //undefind
created   	  绑定事件,挂载数据 并且在这里更新data 不会触发update函数

beforeMount   将模板编译为虚拟dom,放到render中准备渲染 在这里更新data 不会触发update函数
mounted       渲染出真实dom 可操作真实dom

//如果组件中有更新,就会触发beforeUpdate
beforeUpdate  重新生成dom树 根据diff(本质是调用patch函数)算法,对比上一次dom树
updated       数据更新完成 render完成

beforeDestroy 一般在这里做一些善后工作,例如清除计时器、清除非指令绑定的事件等
destroyed     组件的数据绑定、监听...去掉后只剩下dom空壳

如上因为检测不到属性的变化,自然不会触发update函数,所以视图也没有更新

这个时候就需要$set,出现了,用法如下

//只要将clicks 修改成
clicks(item){
	//item.checked = "0";
	this.$set(item,'checked','0');
}

错误写法:this.$set(key,value)(ps: 可能是vue1.0的写法)

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值