Skip to content

computedEager

类别
导出体积
189 B
上次更改
6 minutes ago
别名
eagerComputed

即时计算的计算属性,没有延迟评估。

TIP

注意💡:如果您使用的是 Vue 3.4+,您可以立即使用 computed,不再需要这个函数。

在 Vue 3.4+ 中,如果计算的新值没有变化,computedeffectwatchwatchEffectrender 的依赖将不会被触发。

查看: https://github.com/vuejs/core/pull/5912

Vue:When a computed property can be the wrong tool 中了解更多。

  • 当你进行复杂的计算时,可以受益于缓存和延迟评估,并且只有在确实需要时才应该 (重新) 计算时,请使用 computed()
  • 当你有一个简单的操作,并且返回值很少更改时,请使用 computedEager(),通常是一个布尔值。

示例

惰性计算
已超过5: false
渲染次数: 0
急性计算
已超过5: false
渲染次数: 0
计数: 0

用法

ts
import { 
computedEager
} from '@vueuse/core'
const
todos
=
ref
([])
const
hasOpenTodos
=
computedEager
(() => !!
todos
.length)
console
.
log
(
hasOpenTodos
.
value
) // false
toTodos.value.push({
title
: 'Learn Vue' })
console
.
log
(
hasOpenTodos
.
value
) // true

类型声明

ts
export type 
ComputedEagerOptions
=
WatchOptionsBase
export type
ComputedEagerReturn
<
T
= any> =
Readonly
<
ShallowRef
<
T
>>
/** * 注意: 如果你正在使用 Vue 3.4+,你可以直接使用 computed。 * 因为在 Vue 3.4+ 中,如果计算属性的新值没有变化, * computed、effect、watch、watchEffect、render 的依赖关系将不会触发。 * 参考: https://github.com/vuejs/core/pull/5912 * * @param fn effect function * @param options WatchOptionsBase * @returns 只读的 shallowRef */ export declare function
computedEager
<
T
>(
fn
: () =>
T
,
options
?:
ComputedEagerOptions
,
):
ComputedEagerReturn
<
T
>
/** @deprecated use `computedEager` instead */ export declare const
eagerComputed
: typeof
computedEager

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Anthony Fu
Vida Xie
SerKo
Robin
IlyaL
briwa
Doctorwu
Jonathan Tovar Diaz
wheat

更新日志

e5f74 - feat!: deprecate alias exports in favor of original function names (#5009)
c1d6e - feat(shared): ensure return types exists (#4659)
0a9ed - feat!: drop Vue 2 support, optimize bundles and clean up (#4349)
b6d8f - fix: adapt to changes in vue3.4+ (#3689)