Skip to content

computedEager

类别
导出体积
398 B
上次更改
4 months 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

用法

js
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

类型声明

typescript
/**
 * 注意: 如果你正在使用 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 只读的 ref
 */
export declare function computedEager<T>(
  fn: () => T,
  options?: WatchOptionsBase,
): Readonly<Ref<T>>
export { computedEager as eagerComputed }

源码

源码演示文档

贡献者

Anthony Fu
一纸忘忧
Anthony Fu
Doctorwu
Jonathan Tovar Diaz
wheat

更新日志

v10.7.2 on 1/14/2024
b6d8f - fix: adapt to changes in vue3.4+ (#3689)