vue定义在computed的变量无法更新问题及解决

 更新时间:2023年01月10日 16:43:59   作者:reisaru  
这篇文章主要介绍了vue定义在computed的变量无法更新问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue定义在computed的变量无法更新

情境是这是线上商城的详情页面,商品详情是items数组,点击分类页面的商品,路由跳转到详情页面,路由参数是商品在items中的序号。

但是问题是只有第一次点击商品i的时候可以正常加载items[i]的数据到html中,退出后点击商品j,发现加载的还是商品i的信息,只有刷新后才会更新成商品j的信息。

部分代码:

        <shopPanel
            :key = "nums"
            :goodname="item.text"
            :tag="item.tag"
            :sale="item.sale"
            :price="item.price"
            :ori="item.ori_price"
        >
        </shopPanel>

和computed定义的,注意这里定义的数据item,是不能够修改的,想修改只能用set来修改。

我这里测试时发现明明item关联的两个属性this.focus和this.idx改变了,那为什么item没有改变呢?

而且是刷新后就能改变。

        computed: mapState({
            items:'items', //商品详情信息
            item(){
                console.log(this.focus+" "+this.idx);
                return this.items[this.focus].children[this.idx]
            }
        }),

最后的原因竟然是定义路由的时候选择了keepalive,页面不会销毁,改成false就行。

        path: '/item/item01',
        name:'itemdetail',
        meta: {
            title: '商品1',
            keepAlive: false,
            showTab: false
        },
        component: (resolve) => require(['../page/itemdetail/item01'], resolve),

vue computed依赖收集与更新原理

今天面了家小公司,上来直接问 computed 底层原理,面试官是这样问的,data 中定义了 a 和 b 变量。computed 里面定义了 c 属性,c 的结果依赖与 a 和 b,模板中使用了变量 c。假设改变了 a,请问底层是如何收集依赖,如何触发更新的?

<div>{{ c }}</div>
data(){
    return {
        a: 'foo',
        b: 'bar'
    }
},
computed: {
    c() { 
        return this.a + ' - ' + this.b;
     }
},
mounted(){
    setTimeout(() => { this.a = 'FOO' }, 1000)
}

页面效果:先显示了 foo - bar,一秒之后显示 FOO - bar

这里查源码后,对computed原理简述如下

1.initState 函数中初始化了 initComputed

export function initState (vm: Component) {
  vm._watchers = []
  const opts = vm.$options
  if (opts.props) initProps(vm, opts.props)
  if (opts.methods) initMethods(vm, opts.methods)
  if (opts.data) {
    initData(vm)
  } else {
    observe(vm._data = {}, true /* asRootData */)
  }
  if (opts.computed) initComputed(vm, opts.computed)
  if (opts.watch && opts.watch !== nativeWatch) {
    initWatch(vm, opts.watch)
  }
}

2.initComputed 函数中遍历 computed 中每一个属性,并且 new Watcher(computed watcher),可以看到传入 Watcher 构造函数的 cb 是 noop,它是一个空函数。并且 defineComputed

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
      )
    }

    // component-defined computed properties are already defined on the
    // component prototype. We only need to define computed properties defined
    // at instantiation here.
    if (!(key in vm)) {
      defineComputed(vm, key, userDef)
    } else if (process.env.NODE_ENV !== 'production') {
      if (key in vm.$data) {
        warn(`The computed property "${key}" is already defined in data.`, vm)
      } else if (vm.$options.props && key in vm.$options.props) {
        warn(`The computed property "${key}" is already defined as a prop.`, vm)
      } else if (vm.$options.methods && key in vm.$options.methods) {
        warn(`The computed property "${key}" is already defined as a method.`, vm)
      }
    }
  }
}

3.defineComputed 中使用了 Object.defineProperty 对属性进行劫持,获取是返回对应的 getter 即 createComputedGetter

export function defineComputed (
  target: any,
  key: string,
  userDef: Object | Function
) {
  const shouldCache = !isServerRendering()
  if (typeof userDef === 'function') {
    sharedPropertyDefinition.get = shouldCache
      ? createComputedGetter(key)
      : createGetterInvoker(userDef)
    sharedPropertyDefinition.set = noop
  } else {
    sharedPropertyDefinition.get = userDef.get
      ? shouldCache && userDef.cache !== false
        ? createComputedGetter(key)
        : createGetterInvoker(userDef.get)
      : noop
    sharedPropertyDefinition.set = userDef.set || noop
  }
  if (process.env.NODE_ENV !== 'production' &&
      sharedPropertyDefinition.set === noop) {
    sharedPropertyDefinition.set = function () {
      warn(
        `Computed property "${key}" was assigned to but it has no setter.`,
        this
      )
    }
  }
  Object.defineProperty(target, key, sharedPropertyDefinition)
}

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}

看到这里,我们大致可以理解,Vue 组件在初始化时,initState -> initComputed -> new Watcher() 计算watcher,传入的 callback 是 computer 属性的 getter,由于 computed 是 lazy: true watcher,所以 new Watcher 时并不会立即执行 watcher 实例上的 get(), 而是在 defineComputed 函数里面调用 createComputedGetter 函数,在 createComputedGetter 函数执行了 watcher.evaluate() 进而执行了 watcher.get().

执行 watcher.get() 首先 pushTarget(this),将 Dep.target 赋值为当前的 computed watcher,然后执行 this.getter也就是执行 computer 属性配置的 getter,执行getter 就会访问所依赖的每一个值,就会被 Object.defineProperty 劫持到进入 get ,执行 dep.depend() , 会为每一个属性对应的 dep 实例添加一个 computed watcher,同时这个 computed watcher 也会保存对应的 dep。

说了这么多都在讲 computed watcher,那修改 this.a 页面为什么会发生更新呢?

答案:因为 this.a 的依赖中不仅有 computed watcher 还有一个 render watcher

原因:

$mount 是会执行 mountComponent,会创建一个 render watcher,它会立即执行 cb(目前 Dep.target 是 render watcher),调用 render 函数在底层编译模板,最后访问属性计算属性 c,访问计算属性 c 就必定会访问 a,当访问 a 时会触发 defineComputed 中的 Object.defineProperty 进而劫持调用 createComputedGetter,进而调用 watcher.depend(),这个 watcher 是 computed watcher

function createComputedGetter (key) {
  return function computedGetter () {
    const watcher = this._computedWatchers && this._computedWatchers[key]
    if (watcher) {
      if (watcher.dirty) {
        watcher.evaluate()
      }
      if (Dep.target) {
        watcher.depend()
      }
      return watcher.value
    }
  }
}
// Watcher.js
depend () {
  let i = this.deps.length
  while (i--) {
    this.deps[i].depend()
  }
}

调用 watcher.depend() , this 指的是 computed watcher,会将 computed watcher 里面的 deps 保存在所有依赖调用 deps[i].depend(),进而调用 Dep 类中的 Dep.target.addDep(this),使得 render watcher 中保存了当前的 dep,dep 中同时保存了 render watcher。

dep 中同时保存了 render watcher。就可以看出,示例中的属性 a 的 dep 中也会保存 render watcher,所以 a 属性的 dep 中有两个 watcher: [computedWatcher, renderWatcher]

所以,修改 a 属性的值,最后 notify 会清空这个 保存 watcher 的队列,进行页面更新!Okay! 

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中动态绑定Ref的两种方式总结

    Vue中动态绑定Ref的两种方式总结

    Vue3中的ref是一种创建响应式引用的方式,它在Vue生态系统中扮演着重要角色,下面这篇文章主要给大家介绍了关于Vue中动态绑定Ref的两种方式,需要的朋友可以参考下
    2024-09-09
  • Vue Getters和mapGetters的原理及使用示例详解

    Vue Getters和mapGetters的原理及使用示例详解

    Vuex的核心概念包括state、mutations、actions、getters和modules,今天,我们要深入探讨其中一个关键部分:getters,以及它的相关辅助函数mapGetters,感兴趣的朋友跟随小编一起看看吧
    2024-08-08
  • vue.js动态设置VueComponent高度遇到的问题及解决

    vue.js动态设置VueComponent高度遇到的问题及解决

    这篇文章主要介绍了vue.js动态设置VueComponent高度遇到的问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • 解决vue axios的封装 请求状态的错误提示问题

    解决vue axios的封装 请求状态的错误提示问题

    今天小编就为大家分享一篇解决vue axios的封装 请求状态的错误提示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • vue element-ui里的table中表头与表格出现错位的解决

    vue element-ui里的table中表头与表格出现错位的解决

    这篇文章主要介绍了vue element-ui里的table中表头与表格出现错位的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-08-08
  • Vue中的组件详谈

    Vue中的组件详谈

    这篇文章主要介绍了Vue的组件,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-10-10
  • vue两组件间值传递 $router.push实现方法

    vue两组件间值传递 $router.push实现方法

    两组件间传值,可能包含多种情况,这篇文章主要介绍了vue两组件间值传递 $router.push实现方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-05-05
  • Vue3 Ref获取真实DOM学习实战

    Vue3 Ref获取真实DOM学习实战

    这篇文章主要为大家介绍了Vue3 Ref获取真实DOM学习实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-06-06
  • VUE 3D轮播图封装实现方法

    VUE 3D轮播图封装实现方法

    这篇文章主要为大家详细介绍了VUE 3D轮播图封装实现方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • vue中let that=this的作用及说明

    vue中let that=this的作用及说明

    这篇文章主要介绍了vue中let that=this的作用及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-10-10

最新评论