vue中改变数组的值视图无变化

今天开发的时候遇到一个多选取消点击状态的，渲染的时候先默认都选中，然后可以取消选中，自建了一个全为true的数组，点击时对应下标的arr[index]改为false，数据改变了状态没更新，突然想起来单独改变数字某一项或对象的属性视图不会更新，把数组改变值后重新复制结果可以了，项目结束后网上查了下具体情况，发现有大神总结的比较全面，怕找不到了摘抄了一段以作记录，摘抄自：https://blog.csdn.net/qq_34935885/article/details/75734365

vue 直接改变数组数据不刷新

 

因为 javascript 的限制，Vue.js 不能检测到下面数组变化：

1. 直接用索引设置元素，如 vm.items[0] = {}；

2. 修改数据的长度，如 vm.items.length = 0。

为了解决问题 (1)，Vue.js 扩展了观察数组，为它添加了一个 $set() 方法：

// 与 example1.items[0] = ... 相同，但是能触发视图更新
example1.items.$set(0, { childMsg: ‘Changed!’})

 

或者使用vue变异方法：