1. 什么是 computed 计算属性
computed 计算属性是 Vue.js 中一种特殊的方法，它可以通过对传入的数据进行计算，生成对应的计算结果，并将计算结果绑定到视图中。computed 计算属性的特点是：
- 支持缓存，只有在使用到计算属性的依赖数据发生改变时才会重新计算，从而提高计算效率。
- 具有观察数据的功能，当计算的依赖数据发生变化时，计算属性会自动更新。
computed 计算属性可以在实际开发中用于实现复杂的数据计算和数据筛选等操作，从而使数据操作代码更加简洁、直观和易于维护，提高代码的可读性和可维护性。
2. computed 计算属性的原理
computed 计算属性的另一个特点是支持缓存，这也是它能够提高计算效率的重要原因。具体来说，computed 计算属性的实现原理如下：
- 在组件实例创建时，Vue.js 会对计算属性进行初始化，将计算属性转化为一个响应式对象。
- 当计算属性首次被读取时，Vue.js 会将计算属性的 getter 函数压入一个计算属性的观察者列表中，并执行该 getter 函数计算出其返回值，并将返回值存储下来。
- 当计算属性的依赖数据发生变化时，Vue.js 会触发计算属性更新，并重新执行计算属性的 getter 函数计算出新的返回值，如果新值和旧值不相等，则把新值缓存起来，并通知其依赖的组件进行更新。
3. computed 计算属性的应用场景
computed 计算属性相对于 methods 方法的主要优势是计算属性会进行缓存，只要依赖数据没有发生变化，则不会重复计算，提高了计算效率。因此，可以考虑在以下场景使用 computed 计算属性：
- 计算式数据的展示：如果要在模板中展示复杂的计算式数据（如计算商品价格、计算订单总额等），使用 computed 计算属性可以避免在模板中直接写大量计算式，从而提高代码的可读性和可维护性。
示例代码：
-- -------------------- ---- ------- ---------- ----- -------- ------------- -------- ---------------- -------- ------------------ ------ ----------- -------- ------ ------- - ------ - ------ - ------ --- --------- - - -- --------- - ------------ - ------ ---------- - ------------- - - - ---------展开代码
- 筛选数据：如果要根据一些条件对数组进行筛选，可以使用 computed 计算属性实现。这样可以避免在模板中进行复杂的筛选条件判断，提高代码的可读性和可维护性。
示例代码：
-- -------------------- ---- ------- ---------- ----- ---- --- ----------- -- ------------- --------------------------------- ----- ------ ----------- -------- ------ ------- - ------ - ------ - ----- - ---- -- ----- ----- ---- ---- ---- -- ----- ----- ---- ---- ---- -- ----- ----- ---- ---- -- ---------- -- - -- --------- - -------------- - -- ----------------- - ------ --------- - ------ --------------------- -- --------------------------------- - --- - - - ---------展开代码
4. 总结
computed 计算属性是 Vue.js 中一种重要的数据计算和数据筛选方式，具有缓存和观察数据的功能，可以提高计算效率和代码可读性。在实际开发中，应根据实际情况使用 computed 计算属性，从而实现代码的简洁、直观和易于维护。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64a3bca548841e989401d937
