$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的写法)