vue3中的计算属性和侦听属性

1.基本概念

  计算属性的主要特点是他们基于他们依赖的响应式数据进行计算的,并且只有在其依赖的数据发生变化时才会重新计算。这样可以提高性能，因为它们不会无故地重新计算。

2.为什么要用?

  模板中的表达式虽然方便，但也只能用来做简单的操作。如果在模板中写太多逻辑，会让模板变得臃肿，难以维护。比如说，我们有这样一个包含嵌套数组的对象：

我们想根据itbaizhan是否有一些技能展示不同信息:

  这里的模板看起来有些复杂。我们必须认真看好一会儿才能明白它的计算依赖于 itbaizhan.content。更重要的是，如果在模板中需要不止一次这样的计算，我们可不想将这样的代码在模板里重复好多遍。

因此我们推荐使用计算属性来描述依赖响应式状态的复杂逻辑。这是重构后的示例：

 3.计算属性缓存 vs 方法

  你可能注意到我们在表达式中像这样调用一个函数也会获得和计算属性相同的结果：

  若我们将同样的函数定义为一个方法而不是计算属性，两种方式在结果上确实是完全相同的，然而，不同之处在于计算属性值会基于其响应式依赖被缓存。一个计算属性仅会在其响应式依赖更新时才重新计算。

  这意味着只要itbaizhan.content不改变，无论多少次访问都会立即返回先前的计算结果，而不用重复执行 getter 函数。这也解释了为什么计算属性永远不会更新,它并不是一个响应式依赖:

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

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

4.可写计算属性

  

  计算属性默认是只读的。当你尝试修改一个计算属性时，你会收到一个运行时警告。只在某些特殊场景中你可能才需要用到“可写”的属性，你可以通过同时提供 getter 和 setter 来创建：

  现在当你再运行 fullName.value = 'John Doe' 时，setter 会被调用而 firstName 和 lastName 会随之更新。