Vue进阶之路之$set的理解

$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>