Vue computed 計算屬性

<template>
    <div id="app">
        <div>{{reverseTitle}}</div>
        <div>{{reverseTitle2()}}</div>
        <button @click="add()">補充貨物1</button>
        <div>總價為：{{price}}</div>
    </div>
</template>
<script>
export default {
    data(){
        return {
            package1: {
                count: 5,
                price: 5
            },
            package2: {
                count: 10,
                price: 10
            },
            title: 'Hello Vue!!!'
        }
    },
    computed: {
        price(){
            return this.package1.count*this.package1.price+this.package2.count*this.package2.price　　//總價隨着貨物或價格的改變會重新計算
        },
        reverseTitle(){//計算屬性里面的方法，只要引用值沒發生變化，那么就不會執行該方法
            console.log('我執行了reverseTitle方法')
            return this.title.split('').reverse().join('')
        }
    },
    methods: {   //對象的方法
        add(){
            this.package1.count++
            this.package2.count++
        },
        reverseTitle2(){//每次頁面渲染時就會執行該方法
            console.log('我執行了reverseTitle2方法:', this.title)
            return this.title.split('').reverse().join('')
        }
    }
}
</script>

總結：
1.computed 在第一次引用，或引用值改變時才會觸發里面的方法（緩存，減少不必要的反復計算）
2.在methods 里面的方法會在頁面渲染更新時反復調用（耗費大量性能）
3.使用computed 定義方法后 可以在模板中直接用方法名得到結果 而不需要像methods 這樣()使用（方便調用）