vue computed
问题的例子如下
点击查看例子
vue computed是计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值,依赖只监听了一层和相关的依赖,对于数组对象这类的深层数据,就无法监听到改变。
vue computed源码在在初始化watch的时候没有进行deep深层watch,
vue computed 源码如下
const computedWatcherOptions = { lazy: true }
function initComputed (vm: Component, computed: Object) {
// $flow-disable-line
const watchers = vm._computedWatchers = Object.create(null)
// computed properties are just getters during SSR
const isSSR = isServerRendering()
for (const key in computed) {
const userDef = computed[key]
const getter = typeof userDef === 'function' ? userDef : userDef.get
if (process.env.NODE_ENV !== 'production' && getter == null) {
warn(
`Getter is missing for computed property "${key}".`,
vm
)
}
if (!isSSR) {
// create internal watcher for the computed property.
watchers[key] = new Watcher(
vm,
getter || noop,
noop,
computedWatcherOptions
)
}
// 省略
}
}
解决方案
1.改用watch
2.修改数据到最顶层
let current = { ...this.list[index], num: newNum };
this.$set(this.list, index, current);