Vue学习：6.认识计算属性

计算属性是 Vue.js 提供的一种特殊属性，用于在模板中动态计算和返回数据。计算属性使得在模板中使用动态计算的数据变得非常简洁和方便，同时又能保持响应式更新的特性，提高了代码的可读性和可维护性。

与方法（methods）的区别：

计算属性（Computed Properties）和方法（Methods）在 Vue.js 中都可以用来计算和返回数据，但它们之间有几个关键的区别：

1. 缓存与非缓存：

   • 计算属性：计算属性会根据它们的依赖进行缓存。只有当依赖发生变化时，计算属性才会重新计算其值。这意味着在同一依赖下多次访问计算属性时，只会执行一次计算，后续访问会直接返回缓存的值。
   • 方法：方法每次被调用时都会重新执行其中的代码，不会进行缓存。每次调用方法都会重新计算其返回值。

2. 语法：

   • 计算属性：使用 computed 属性来定义计算属性，需要使用一个函数来计算并返回属性的值。
   • 方法：在 Vue.js 组件中可以直接定义普通方法，然后在需要的地方调用这些方法来获取数据。

3. 依赖追踪：

   • 计算属性：Vue.js 能够自动追踪计算属性的依赖，并在依赖发生变化时自动重新计算属性的值。这意味着你无需手动管理计算属性的依赖关系。
   • 方法：方法不具备自动的依赖追踪功能。如果方法内部依赖于响应式数据，你需要手动管理这些依赖关系。

4. 用途：

   • 计算属性：适用于基于响应式数据进行复杂的计算逻辑，例如过滤、排序、格式化等操作。常用于模板中直接引用，以简化模板的复杂度。
   • 方法：适用于不依赖响应式数据或依赖较少的简单计算逻辑。常用于事件处理、方法调用等场景。

5. 调用方式：

   • 计算属性：在模板中直接像访问数据属性一样使用计算属性，不需要加括号。
   • 方法：在模板中通过方法名加括号的方式调用方法。

一句话，计算属性适用于需要缓存和依赖追踪的复杂计算逻辑，而方法则适用于不需要缓存或依赖较少的简单计算逻辑。

计算属性实例：礼物清单

实现功能：

根据礼物清单，统计求和，求得礼物总数。

思路：

首先在computed里声明一个求和的计算属性（就是一个函数），然后在html里像普通属性一样使用。

代码：

html：

<div id="app">
        <h3>黑仔的礼物</h3>
        <table>
            <tr>
                <th>名称</th>
                <th>数量</th>
            </tr>
            <tr v-for="(item, index) in gifts" :key="item.id">
                <td>{{ item.name }}</td>
                <td>{{ item.num }}</td>
            </tr>
        </table>
        <p style="color: red;">总计：{{ total }}</p>
</div>

js：

<script>
        const app = new Vue({
            el: '#app',
            data: {
                gifts: [
                    {id: 1, name: '篮球', num: 1},
                    {id: 2, name: '本子', num: 10},
                    {id: 3, name: '铅笔', num: 10},
                ]
            },
            //在computed里声明
            //对数组里的sum求和：使用reduce(sum, 0)
            computed: {
                total(){
                    let total = this.gifts.reduce((sum, item) => sum + item.num, 0)
                    return total
                }
            }
        })
</script>

css：

<style>
        table{
            border-collapse: collapse;
        }
        th,td{
            width: 200px;
            height: 50px;
            border: 1px solid black;
            text-align: center;
        }
</style>