computed计算属性监听不到数组元素变化的问题

简单记录一下这次遇到的问题

在methods中的某个事件会改变arr数组中的元素

clickBtn () {
　　this.arr[0] = false
}

 

但在computed中监听不到这个数组中元素的变化，

isAble() {
　　if (this.arr[i]) {
　　　　return true;
　　}
　　return false;
}

解决办法就是在methods中这样写

clickBtn () {
　　this.$set(this.arr, 0 ,false)
}

这样computed就可以检测到啦

this.$set()的官方解释是这样的

向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性 (比如 this.myObject.newProperty = 'hi')

https://cn.vuejs.org/v2/api/#Vue-set

补充：

当你给你个对象添加一个属性之后在控制台可以输出，但视图没有更新，这个时候就需要用到this.$set()了

这种情况也可以在方法中的第一行添加这样一句

this.$forceUpdate();

这样可以进行视图层重新渲染