zoukankan      html  css  js  c++  java
  • 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);
    
  • 相关阅读:
    最接近原点的 K 个点
    水域大小
    根据数字二进制下 1 的数目排序
    有效的山脉数组
    岛屿的周长
    求根到叶子节点数字之和
    数组中的最长山脉
    [转] 结构体file_operations
    获取主机硬件资源 函数
    readdir() 获取文件类型
  • 原文地址:https://www.cnblogs.com/heihei-haha/p/14517320.html
Copyright © 2011-2022 走看看