vue渲染真实dom问题

Question

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仍然成功更新，求解

Answer 1

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

Answer 2

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

Answer 3

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

Answer 4

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

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

vue中的解决方法：

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