vue computed 无法deep的问题

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);
原文地址:https://www.cnblogs.com/heihei-haha/p/14517320.html