计算属性依赖多个变量时怎么只让他渲染一次

props:{
a:Object,
b:Object,
c:Object
}
,computed:{
options(){
let a=this.a;
let b=this.b;
let c=this.c;
return{
a,
b,
c
}
}

}

如果被依赖项都是 prop,写到 data 里:

props: ['a', 'b', 'c'],
data () {
  return {
    x: this.a + this.b + this.c,
  }
}

原理是声明阶段的 data 不是响应式的。

如果一定要用计算属性,额外添加一个标记状态,在计算属性第一次进行计算时更新那个标记状态,后续的计算直接 if 掉。

1 Like

如果你传入了一个对象类型的 prop 值,而这个对象的属性已经是响应式的,那是会继续触发响应式更新。解决办法也简单,复制一下就好:

props: ['obj'],
data () {
  return {
    something: {...obj},
  }
}

标记状态+计算属性的方案依然有效。

1 Like

大神就是大神,思路清晰,实用易懂

不是很明白你的问题。可以简述一下你的预期效果吗?

还是不太明白你的问题。如果我没理解错的话,第一个方式是传递了一个字面量,父组件本身都不能修改这个值,又如何靠这个值重复渲染子组件呢。

你可以写一个 JSFiddle 案例吗?

大神,我也有一个计算属性的问题,就是在store里面,我一个getter是这样写的:

const getters = {
  userInfo: state => {
    if (VueCookies.get('profile')) {
      return state.userInfo;
    } else {
      return null;
    }
  }
}

为什么state.userInfo变更的时候,它无法触发更新呢?

Vue 的依赖收集发生在状态访问过程中,也就是「一边读取状态一边收集依赖」。那么顺着读一下你的代码:

第一个表达式/语句是 VueCookies.get('profile'),不包含任何响应式状态。假设这个函数第一次调用返回值是布尔否值,则:

第二个表达式/语句是 return null,不包含任何响应式状态。然后 getter 函数退出,对 userInfo 的依赖收集完毕。

发现问题了吗?在第一次依赖收集时,Vue 没有访问到任何必要的响应式状态,所以在 Vue 看来,userInfo 这个状态没有任何依赖。

解决办法也简单:

userInfo: state => {
  void state.userInfo // 强制访问目标响应式状态以触发 Vue 的依赖收集
  if (...) {
    ...
  } else {
    ...
  }
}

这个问题究其原因是因为 Vue 无法对 JS 进行静态分析,所以代码不执行 Vue 无法感知你到底引用了什么。类似的逻辑放到模板中就没有问题,因为 Vue 可以对模板进行全面的静态分析。这也是 render 函数和模板的区别之一。


另外,与原主题无关的问题应该创建新主题发布,这样有助于他人检索。

1 Like

:100: 学习了学习了

大神就是大神,学习了学习了