Skip to content

computedEager

预计算而无需惰性求值。

¥Eager computed without lazy evaluation.

提示

注意💡:如果你使用的是 Vue 3.4+,则可以立即使用 computed。在 Vue 3.4+ 中,如果计算的新值没有变化,则不会触发 computedeffectwatchwatchEffectrender 依赖。参见:https://github.com/vuejs/core/pull/5912

¥Note💡: If you are using Vue 3.4+, you can use computed right away. In Vue 3.4+, if the computed new value does not change, computed, effect, watch, watchEffect, render dependencies will not be triggered. See: https://github.com/vuejs/core/pull/5912

欲了解更多信息,请访问 Vue:当计算属性可能是错误的工具时

¥Learn more at Vue: When a computed property can be the wrong tool.

  • 当你进行复杂的计算时,请使用 computed(),这实际上可以从缓存和惰性求值中受益,并且只有在确实必要时才应该(重新)计算。

    ¥Use computed() when you have a complex calculation going on, which can actually profit from caching and lazy evaluation and should only be (re-)calculated if really necessary.

  • 当你进行简单操作且返回值很少变化(通常是布尔值)时,请使用 computedEager()

    ¥Use computedEager() when you have a simple operation, with a rarely changing return value – often a boolean.

示例

Lazy Computed
Is over 5: false
Renders: 0
Eager Computed
Is over 5: false
Renders: 0
Count: 0

用法

¥Usage

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
>>
/** * Note: If you are using Vue 3.4+, you can straight use computed instead. * Because in Vue 3.4+, if computed new value does not change, * computed, effect, watch, watchEffect, render dependencies will not be triggered. * refer: https://github.com/vuejs/core/pull/5912 * * @param fn effect function * @param options WatchOptionsBase * @returns readonly shallowRef */ export declare function
computedEager
<
T
>(
fn
: () =>
T
,
options
?:
ComputedEagerOptions
,
):
ComputedEagerReturn
<
T
>
export {
computedEager
as
eagerComputed
}

源代码

源代码示例文档

变更日志

最近没有更改