Skip to content

计算属性与方法、watch 的异同

计算属性缓存 vs 方法

在 Vue 中,调用一个函数可能也会获得到和计算属性相同的结果。

当我们将同样的函数定义为一个方法而不是计算属性,两种方式在结果上确实是完全相同的。不同之处在于,计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。只要原变量不改变,无论访问多少次计算属性都会立即返回先前的计算结果,而不用重复执行 getter 函数。

这也意味着下面的计算属性永远不会更新,因为 Date.now() 并不是一个响应式依赖:

js
const now = computed(() => Date.now());

相比之下,方法调用总是会在重渲染发生时再次执行函数。

什么情况下需要缓存?如果有一个非常耗性能的计算属性 list,需要循环一个巨大的数组并做许多计算逻辑,并且可能也有其他计算属性依赖于 list。没有缓存的话,会重复执行非常多次 list 的计算函数。然而这实际上没有必要。如果确定不需要缓存,那么也可以使用方法调用。

计算属性 vs 侦听器

计算属性允许我们声明性地计算推导值。然而,在有些情况下,为了应对一些状态的变化,我们需要运行些「副作用」:例如更改 DOM,或者根据异步操作地结果,去修改另一处的状态。

Released under the MIT License.