什么是计算属性？
计算属性是基于它们的依赖进行缓存的。只在相关依赖发生改变时才会重新求值。这就意味着只要依赖没有发生变化，读取计算属性和第一次渲染时是相同的计算结果，而不必再次计算。
为什么要使用计算属性？
计算属性可以用来简化模板中的表达式，让代码更清晰、更易维护。计算属性也可以用来监听和响应数据的变化。
基本用法
计算属性在 computed 属性中定义，其值是一个对象，该对象的每个属性都对应一个计算属性：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
---------- -------
--------- -----
-
--
--------- -
---------- -
------ ------------------ -----------------
-
-
-在模板中可以直接使用 fullName 属性：
<div id="app">
<p>{{ fullName }}</p>
</div>计算属性的 getter 和 setter
计算属性默认只有 getter，不过在需要时也可以提供一个 setter：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
---------- -------
--------- -----
-
--
--------- -
--------- -
----- -
------ ------------------ -----------------
--
------------- -
----- ----- - ---------------- --
-------------- - --------
------------- - ------------------ - --
-
-
-
-现在可以像修改普通属性一样来设置 fullName：
<div id="app"> <input v-model="fullName" /> </div>
侦听器 (Watchers)
侦听器允许我们执行异步操作或开销较大的操作，并且可以观察 Vue 实例上的数据变动。当被侦听的数据发生变化时，就会触发相应的回调函数。
基本用法
侦听器通过 watch 选项来定义：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
--------- ---
------- ---------- ------- ------- - -------- ----- ----
-
--
------ -
--------------------- ------------ -
-- --------------------------- -
----------------
-
-
--
-------- -
----- ----------- -
----------- - -------------
--- -
----- -------- - ----- ----------------------------------
----------- - --------------------
- ----- ------- -
----------- - ------- ----- --- ----- --- -----
-
-
-
-深度监听
如果需要监听一个对象内部的属性变化，可以使用深度监听：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
----- -
----- ----- -----
-------- -
------- ---- ---- ----
----- ---------
-
-
-
--
------ -
----- -
--------------- ------- -
----------------- ---------- ------- -------
--
----- ----
-
-
-立即执行
如果你希望在侦听开始之后就立即执行一次侦听器，可以添加一个 immediate 选项：
-- -------------------- ---- -------
------ ------- -
------ -
------ -
------------ -
-
--
------ -
------------ -
--------------- ------- -
------------------------ ------- ---- --------- -- -----------
--
---------- ----
-
-
-总结
计算属性和侦听器都是 Vue.js 中非常重要的概念。计算属性用于简化复杂的逻辑表达式，而侦听器则用于监听数据变化并作出响应。正确地使用它们可以使你的应用更加高效、易于维护。
接下来我们将继续探讨其他 Vue3 的重要特性，包括组件通信、插槽等，敬请期待！