在 Vue 2.0 中,如果你直接通过索引的方式修改数组,Vue 无法检测到数组的变化,因此无法触发视图的更新。这是因为 Vue 2.0 使用了`Object.defineProperty`来劫持数组的变化方法,但无法劫持数组索引的赋值操作。
要解决这个问题,可以使用 Vue 提供的 `$set` 方法来修改数组的元素,以确保 Vue 能够正常检测到变化并更新视图。
在你的问题中,你可以使用 `$set` 方法来修改数组中的元素,如下所示:
Vue.set(arr, 0, [false, false]);
或者你也可以使用数组的 `splice` 方法来实现同样的效果:
arr.splice(0, 1, [false, false]);
这样修改数组元素后,Vue 将能够正确地检测到变化并更新视图。同时,`__ob__: Observer` 会被正确设置,用于追踪数组的变化。
vue2.0 data中的变量arr:0,为什么给变量arr赋值arr=1会导致视图不更新
在 Vue 2.0 中,Vue 会在实例化时将 data 对象中的属性转化为响应式的对象。这意味着当一个属性被修改时,Vue 能够检测到变化并更新相关的视图。
然而,直接修改一个属性的引用,比如将 `arr` 从 0 修改为 1,Vue 是无法检测到这种变化的,因为这时候 `arr` 是一个新的值,并不是原来响应式对象中的属性。
要解决这个问题,可以使用 Vue 提供的 `$set` 方法来修改属性的值,或者在修改之前声明 `arr` 是响应式的。
下面是两种解决方法:
方法1:使用 Vue 提供的 `$set` 方法
Vue.set(this, 'arr', 1);
使用 `$set` 方法可以将 `arr` 的值改为 1,并且 Vue 能够检测到变化并更新视图。
方法2:在修改之前声明 `arr` 是响应式的
this.arr = 1; // 或者在 data 中将 arr 初始化为响应式的值
如果你在 data 中将 `arr` 初始化为响应式的值,或者将它绑定到实例时声明为响应式的值,然后再修改它的值,Vue 也能够检测到变化并更新视图。
总之,无论是使用 `$set` 方法还是在声明时将属性设置为响应式的值,你都需要确保 Vue 能够正确地检测到属性的变化,从而更新视图。