在 Vue.js 的开发过程中，使用 computed 计算属性是非常常见的操作。computed 属性可以通过逻辑代码进行计算，而不需要重复使用代码来计算。本文将介绍一些关于使用 computed 计算属性的高级技巧，以帮助你更好地进行 Vue.js 开发。
什么是 computed 计算属性
在 Vue.js 中，computed 计算属性是一种可以通过逻辑计算返回值的属性。它对应的是组件中的数据属性，可以通过这些属性的值来计算得到对应的返回值。computed 计算属性只有在其依赖的数据属性被修改时才会重新计算，从而避免了重复计算的情况。
computed 计算属性一般用于计算复杂的逻辑属性，可以通过 getter 函数的方式取值，类似于拦截 get 操作符的行为，使得属性的值不需要手动设置。
使用 computed 计算属性的高级技巧
访问其他实例属性
在 Vue.js 中，computed 计算属性可以访问组件实例的其他属性，甚至可以访问其他计算属性。这样，就可以在计算属性之间进行逻辑操作和计算，从而得到更加复杂的返回值。
-- -------------------- ---- -------
-- ------
------ ------- -
------ -
------ -
------ ----
------ --
--
--
--------- -
------- -
------ ---------- - -----------
--
---------- -
------ ---------- - ----
--
------------ -
------ ---------- - --------------
--
--
--在上面的代码中，total 计算属性访问了组件实例中的 price 和 count 属性，discount 计算属性访问了 total 属性，finalPrice 计算属性访问了 total 属性和 discount 属性，这样就可以计算得到最终的价格。
计算集合数据
在 Vue.js 的应用中，计算集合数据是非常常见的操作，例如：计算某个数组中的元素个数、计算数组中某个字段的和等等。这时就可以使用 computed 计算属性配合 array.reduce 方法，来计算集合数据。
-- -------------------- ---- -------
-- -----------
------ ------- -
------ -
------ -
------ -
- ----- -------- ------ - --
- ----- --------- ------ - --
- ----- --------- ------ - --
--
--
--
--------- -
------- -
------ ----------------------- ----- -- --- - ----------- ---
--
--
--在上面的示例代码中，total 计算属性使用数组的 reduce 方法来计算 items 数组中 price 字段的和，并返回总和。
计算过滤数据
在 Vue.js 的应用中，计算过滤数据也是非常常见的操作，例如：过滤数组中满足某个条件的元素、过滤对象中满足某个条件的属性等等。这时就可以使用 computed 计算属性配合 array.filter 方法，来计算过滤数据。
-- -------------------- ---- -------
-- --------------
------ ------- -
------ -
------ -
------ -
- ----- -------- ------ - --
- ----- --------- ------ - --
- ----- --------- ------ - --
--
--
--
--------- -
------------ -
------ ---------------------- -- ---------- - ---
--
--
--在上面的示例代码中，cheapItems 计算属性使用数组的 filter 方法来计算 items 数组中 price 字段小于 4 的元素，并返回过滤后的结果。
总结
在 Vue.js 中使用 computed 计算属性配合高级技巧，可以大大提高代码的复用性和效率，同时也可以让代码更加优雅。本文介绍了 computed 计算属性的访问其他实例属性和计算集合数据和过滤数据等高级技巧，希望能对你进行 Vue.js 开发时有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647aaa24968c7c53b0657c5b