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

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

一样的,这些props只要是对象,数组这类引用型,不管你是用data,还是computed
在传递值的过程中如果直接传递数据而不是通过变量传递引用,就会多次渲染

列如:
<component :a="['1','2','3']" />
组件内部会渲染多次

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

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

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

1 Like

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

那请问下,为什么直接传递数据可能会多次渲染而声明data的变量再传递过去就没事了,明明直接传递的数据不是响应试的。

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

是这样的,我想表达的意思是:

  1. <component :data="[...]">

  2. <component :data="source">

其中source是一个数组,在data中被定义
想请教一下这两种父组件向子组件传递值的方式有什么不同(在渲染过程中),为什么第一种方式可能会使子组件重复渲染多次

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

你可以写一个 JSFiddle 案例吗?

是我自己搞错了,不好意思!
想还请教一个问题:
用ts 写vue组件时出现类型定义错误问题