computedEager

预计算而无需惰性求值。

¥Eager computed without lazy evaluation.

提示

注意💡：如果你使用的是 Vue 3.4+，则可以立即使用 computed。在 Vue 3.4+ 中，如果计算的新值没有变化，则不会触发 computed、effect、watch、watchEffect、render 依赖。参见：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

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