vue渲染真实dom问题

html:
<div id="test">
    <input type="button" @click="fn1()">{{arr['x']}}
    <input type="button" @click="fn2()">{{arr['y']}}
</div>
js:
 data: {
    arr: ['x', 'y'],
    z: 5
},
        
fn2() {
    Vue.set(this.arr, 'y', ++this.arr['y']);
    // ++this.z;
    console.log(this.arr);
}
// 一旦有++this.z这句 就能成功更新渲染,一旦注释这句则无法渲染到dom上,但arr仍然成功更新,求解

回答:

你得把arr改成对象而不是一个数组

回答:

为什么++z这个语句会达到forceupdate的效果,是否会重新render整个对象?

回答:

Vue.set(this.arr, 1, ++this.arr[1]);

回答:

根据你纠结的点 在vue的官网中已经给出了答案如下:

由于 JavaScript 的限制,Vue 不能检测以下变动的数组:
当利用索引直接设置数组的某一项时,例如:vm.items[indexOfItem] = newValue
当你修改数组的长度时,例如:vm.items.length = newLength,不会更新数组。

vue中的解决方法:

使用 Vue.set, vm.$set(Vue.set的变种写法)或者 splice,caoncat等修改数组,同时也将触发状态更新

暂无评论

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注