vue.js Package 在计算属性中的函数

r9f1avp5 于 2023-11-21 发布在 Vue.js

关注(0)|答案(2)|浏览(202)

我多次看到人们如何将函数 Package 在计算属性中，以便能够使用任何值调用它。
这里有一个例子

<template>
  {{ myComputedFunction(2) }}
</template>

<script setup lang="ts">
const refVariable = ref(5)

const myFunction = (a: number) => {
  return a * refVariable.value
}

const myComputedFunction = computed(() => myFunction)

setTimeout(() => {
  refVariable.value = 10
}, 5000)
</script>

字符串
是的，一开始函数会返回10，5秒后它会返回20。但是这样做有多正确呢？

vue.js

来源：https://stackoverflow.com/questions/77351407/a-function-wrapped-in-a-computed-property

2条答案

按热度按时间

3zwjbxry1#

这是一种可行的方法，但它并没有起到很好的作用。参数化的computed可以用来缓存函数。由于在现代JS引擎中创建新函数的速度很快，而computed使用的代理相对较慢，如果这涉及到函数外部的一些基于React值的计算，这主要是有意义的：

const myComputedFunction = computed(() => {
  // some expensive preliminary computation

  return (a: number) => ...
)

字符串
由于myFunction不是React值，因此myComputedFunction只计算一次，myComputedFunction.value === myFunction。{{ myComputedFunction(2) }}和{{ myFunction(2) }}之间没有实际差异。

赞(0）回复(0）举报 2023-11-21

t3irkdon2#

我同意布萨杰拉·布拉希姆的评论，这是完全正确的。
第一次：2 * refVariable（5）= 10
5秒后，refVariable的值变为10，因此计算属性将再次被调用。（每次计算属性的依赖关系发生变化时，都会调用计算属性。）
第二次：2 * refVariable（10）= 20

赞(0）回复(0）举报 2023-11-21