vue中修改了数据但视图无法更新的情况

我们有时候常碰到vue中明明修改了数据,但是视图无法更新

比如: v-for遍历的数据,当数组内容使用的是arr[0].xxx = xx更改数据的时候,vue无法监测到数据修改的

vue2.0增加方法Vue.set

拿我项目中遇到的举个🌰,比如一个数组十条数据,每条数据内有一个disabled来控制当前数据显示时候的一个按钮是否可用状态

// 如果你是这么修改,让按钮不可用,那么你会发现点击按钮之后没有任何效果
arr[4][`disabled`] = true
这样操作才是正确的方式
// Vue.set()方式
Vue.set( 要修改的数据, 要修改的 key, 修改为什么值)
// 比如修改数组中第四条数据的disabled
Vue.set(arr[4], `disabled`, true)
这样你再点击按钮之后就会发现按钮被禁用啦,如果要修改回可用状态,应该就会了吧
Vue.set(arr[4], `disabled`, false)