[05] computed计算属性

computed计算属性

• 语法：
  1. 声明在 中，一个计算属性对应一个函数
  2. 使用起来和普通属性一样使用 {{计算属性名}}
     
     
• 注意
  1. computed配置项和data配置项是同级的
  2. computed中的计算属性虽然是函数的写法，但它依然是
  3. computed中的计算属性不能和data中的属性同名
  4. 使用computed中的计算属性和使用data中的属性是一样的用法
  5. computed中计算属性内部的this依然指向的是Vue实例

<div id="app">
        <table>
            <tr>
                <th>name</th>
                <th>num</th>
            </tr>
            <tr v-for="(item,index) in list" :key="item.id">
                <td>{{item.name}}</td>
                <td>{{item.num}}</td>
            </tr>
        </table>
        <p>sum:{{totalCount}}</p>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.16/dist/vue.js"></script>

    <script>
        const app = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: 1, name: 'apple', num: 1 },
                    { id: 2, name: 'banana', num: 5 },
                    { id: 3, name: 'peach', num: 3 }
                ]
            },
            computed: {
                totalCount() {
                    let total = this.list.reduce((sum, item) => sum + item.num, 0)
                    return total
                }
            }
        })
    </script>

computed计算属性 VS methods方法

• computed计算属性
  作用：封装了一段对于数据的处理，求得一个结果
  语法：
  1. 写在computed配置项中
  2. 作为属性，直接使用
  • js中使用计算属性： this.计算属性
  • 模板中使用计算属性：{{计算属性}}
    
    
• methods计算属性
  作用：给Vue实例提供一个方法，调用以处理业务逻辑。
  语法：
  1. 写在methods配置项中
  2. 作为方法调用
  • js中调用：this.方法名()
  • 模板中调用 {{方法名()}} 或者 @事件名=“方法名”
    
    
• 计算属性的优势
  1.特性（提升性能）
  计算属性会对计算出来的结果缓存，再次使用直接读取缓存，
  依赖项变化了，会自动重新计算并再次缓存
  2. methods没有缓存特性
  
  
• 总结

  1. computed有缓存特性，methods没有缓存

  2. 当一个结果依赖其他多个值时，推荐使用计算属性

  3. 当处理业务逻辑时，推荐使用methods方法，比如事件的处理函数

计算属性的完整写法

1. 计算属性默认的简写，只能读取访问，不能 “修改”
2. 如果要 “修改”，需要写计算属性的完整写法

示例：

computed: {
                fullName: {
                    get() {
                        return this.firstName + this.lastName
                    },
                    set(value) {
                        console.log(value);
                        this.firstName = value.slice(0, 1)
                        this.lastName = value.slice(1)
                    }
                }
            }