跳到主要内容

computedEager

分类
导出大小
189 B
最近更改
3 周前
别名
eagerComputed

立即计算,无需惰性求值。

提示

注意💡: 如果您正在使用 Vue 3.4+,您可以直接使用 computed。在 Vue 3.4+ 中,如果计算出的新值没有改变,computedeffectwatchwatchEffectrender 的依赖项将不会被触发。参见:https://github.com/vuejs/core/pull/5912

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

  • 当您进行复杂的计算时,可以使用 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
/**
 * 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?: WatchOptionsBase,
): Readonly<ShallowRef<T>>
export { computedEager as eagerComputed }

源代码

SourceDemoDocs

贡献者

Anthony Fu
Anthony Fu
IlyaL
briwa
Doctorwu
Jonathan Tovar Diaz
wheat

更新日志

v12.0.0-beta.1 on 11/21/2024
0a9ed - feat!: 删除 Vue 2 支持,优化 bundles 并清理代码 (#4349)
v10.7.2 on 1/14/2024
b6d8f - fix: 适配 vue3.4+ 中的更改 (#3689)

在 MIT 许可证下发布。