- 最近写代码碰到了数据响应式丢失的问题，刚开始还以为是值绑定错了/代码逻辑写错了，结果是由于数据是额外添加导致的，这次就记录下错误出现原因，加深下印象。
1. this.$set
1.1 Vue响应式的局限性
对于对象：Vue 无法检测对象元素的添加或移除。由于 Vue 会在初始化实例时对对象元素执行 getter/setter 转化，所以对象元素必须在 data 对象上存在才能让 Vue 将它转换为响应式的
对于数组：当你利用索引直接设置一个数组值时
this.items[indexOfItem] = newValue，当你修改数组的长度时this.items.length = newLength注：
this.$set()是Vue.set()别名
1.2 对象形式的实际例子演示
data() {
return {
obj:{name:'zs'}
}
}
// 错误演示
methods: {
drag(){
this.obj.age = 18
}
}
// 正确演示
// this.$set(要添加数据的对象, key值, 数据)
methods: {
drag(){
this.$set(this.obj, 'b', 18)
// 或者这样
this.obj= Object.assign({}, this.obj, { b: 18 })
}
}
Vue 无法检测对象元素的添加或移除，所以这样也会丢失响应式
data() {
return {
this.stockList:[{name:'zs' ,id:'1'},{{name:'ls' ,id:'2'}],
this.stockArray:[{name:'zs' ,id:'1',maxLimit:'新字段'},{{name:'ls' ,id:'2',maxLimit:'新字段'}]
}
}
// 错误演示
methods: {
drag(){
this.stockList.map((item) => {
const newData = this.stockArray.find(x=>x.id===item.id)
if (newData) {
item.maxLimit = newData.maxLimit
}
})
}
}
// 正确演示
methods: {
drag(){
this.stockList.map((item) => {
const newData = this.stockArray.find(x=>x.id===item.id)
if (newData) {
this.$set(item,"maxLimit", newData.maxLimit)
}
})
}
}
以上可以看到，首先数组this.stockList与数组this.stockArray进行了遍历，如果符合条件，数组this.stockArray就会把maxLimit字段传递给数组this.stockList,看起来是不是很正常，但this.stockList里面是没有这个maxLimit的，这条数据属于额外新增字段，Vue并不会对其进行响应式变化。
1.3 数组形式的实际例子演示
data() {
return {
itemList: ['a', 'b', 'c']
}
}
// 错误示范
this.itemList[3] = 'd' // 不是响应性的
this.itemList.length = 2 // 不是响应性的
//正确示范
this.$set(this.itemList, 3, 'd' )
this.itemList.splice(删除位置, 删除几个,要添加的元素)) // 如果只传索引则从索引位置后删除之后的元素
- 当然，可能有时候往 数组对象 里动态添加子数组，此时需要面对的不单单是添加数据的问题，还要指定key值，此时演示另一个办法，不指定位置，但指定key值。
demo() {
// 演示数据
const children = [{ name: "子级" }, { name: "子级" }, { name: "子级" }];
const list = [{ name: "演示" }, { name: "演示" }, { name: "演示" }];
// 循环添加 // 可根据条件判断是否添加
list.forEach((x) => {
this.$set(x, "children", children);
});
console.log(list);
},
-
如果不使用
$set()则子级属于动态添加的，不会触发界面的渲染。
效果图
2 . this.$nextTick()
- Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。为了在数据变化之后等待 Vue 完成更新 DOM再更新数据，那么就建议使用
this.$nextTick()
2.1 数据演示
- 以下为模拟代码
<template>
<div class="">
<div>{{value}}</div>
<button @click='btn'>点击</button>
</div>
</template>
<script>
export default {
data () {
return {
value:'原始数据',
}
},
methods: {
btn(){
this.value='我更新了?'
console.log(this.$refs.val.innerText);
this.$nextTick(()=>{
this.value='我更新了'
console.log(this.$refs.val.innerText);
})
}
},
}
</script>
以上可以看到，当点击后直接进行赋值操纵，由于Dom还没进行更新，所以打印出的还是原始数据，当把赋值放在this.$nextTick()里就不一样了，这样回调函数将在 DOM 更新完成后被调用。
