在 Vue 中，我们可以利用 computed 属性去书写一些数据的派生逻辑。Computed 属性会侦听依赖的数据变化并缓存计算结果，从而避免直接繁琐的数据计算。
基本语法
-- -------------------- ---- -------
--- -----
--- -------
----- -
----- --
----- -
--
--------- -
---- ---------- -
------ --------- - ----------
-
-
---在这个示例代码中，我们定义了两个数据属性 num1 和 num2，并利用 computed 属性计算出它们的和 sum。在模板中可以直接使用 {{ sum }} 访问计算结果。
计算属性 vs. 常规函数
上述示例中，利用函数返回值来计算 sum 我们把这个函数称之为计算属性。我们可以用与计算属性相同的方法用一个函数来代替计算属性，效果是相同的。但是，与普通函数不同的是，计算属性会缓存计算结果，并依赖于侦听的数据，在其中的代码只在需要的时候执行。相比之下，普通函数则在每次访问时都会执行。
-- -------------------- ---- -------
--- -----
--- -------
----- -
----- --
----- -
--
-------- -
---- ---------- -
------ --------- - ----------
-
-
---Getter 和 Setter
Computed 属性也可以进行 Set 和 Get 操作，类似于对象的 getter 和 setter。
-- -------------------- ---- -------
--- -----
--- -------
----- -
----- --
----- -
--
--------- -
---- -
---- ---------- -
------ --------- - ----------
--
---- --------------- -
--- --- - -----------------
--------- - -------------------
--------- - -------------------
-
-
-
---在这个示例代码中，我们定义了两个数据属性 num1 和 num2，并利用 computed 属性计算出它们的和 sum。在模板中可以直接使用 {{ sum }} 访问计算结果。但是，我们还可以通过 v-model 操作符，修改计算结果的值。在计算属性的 Backing Property 中定义 Set 函数可以将计算属性转化为一个可编辑的属性。
计算属性的依赖
在刚才的示例代码中，computed 属性 sum 依赖了 num1 和 num2 的值。所以，当 num1 或 num2 的值发生变化时，sum 的值也会跟着发生变化。Vue 能够自动侦测数据变化并触发更新，这就是计算属性的依赖性。
总结
- Vue 中的 computed 可以用于实现数据的派生逻辑。
- 计算属性会根据依赖进行缓存，优化性能。
- 计算属性也可以进行 Set 和 Get 操作，使其可编辑。
- 计算属性的值依赖于侦听的数据，当这些数据变化时它也会自动更新。
在实践中，可以大量运用计算属性和它的气泡，提升数据处理效率和代码可读性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645a71d3968c7c53b0ce36da