Vue 中的計算屬性，方法，監聽器

計算屬性

什麼是計算屬性呢，顧名思義就是計算後的屬性，來看一段代碼

<div id="app">
    {{firstName + ' ' + lastName}}      //這裏展示出來的就是計算屬性
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee'
    }
})

從這裏可以發現，計算屬性是有一些邏輯在裏面的，但是我們不想在模版中寫複雜的邏輯，模版中只做簡單的展示，我們能不能再模版中只做一個簡單的展示{{fullName}}

computed

<div id="app">
    {{fullName}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee'
    },
    //計算屬性
    computed:{
        fullName(){
            return this.firstName + ' ' + this.lastName        
        }
   }
})

通過computed方法來寫計算屬性，fullName最後的值完全是通過firstName和lastName計算得來的。

計算屬性有個非常重要的知識點，它是內置緩存的，怎麼體現這點呢？

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        age:28
    },
    //計算屬性
    computed:{
        fullName(){
            console.log('計算了一次')        //更新 age 時，這句話不執行，只有更新 fullName 依賴的值時，這句話纔會被執行
            return this.firstName + ' ' + this.lastName        
        }
   }
})

當我更新age時，console.log('計算了一次')沒有被執行，而當我更新fullName依賴的值firstName或者lastName時，這句話纔會被執行。

除了使用計算屬性來計算值以外，還可以用一個方法來實現methods

methods

<div id="app">
    {{fullName()}}      //這裏調用方法需要加上括號
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        age:28
    },
    //方法
    methods: {
        fullName(){
            console.log('計算了一次')        //不管什麼數據改變都會執行
            return this.firstName + ' ' + this.lastName
        }
    }
})

用這種方法寫代碼，其實是不如計算屬性來的有效的，因爲數據只要發生變化，console.log就會被執行，它內部沒有緩存機制。

同樣一個功能，用計算屬性computed可以實現，用方法methods也可以實現，哪一種方式更好一些能，很顯然是用計算屬性更好些，因爲它有緩存，性能更高

除了用計算屬性、方法之外，還有沒其他方法可以實現的，

watch

<div id="app">
    {{fullName}}
    {{age}}
</div>
let vm = new Vue({
    el:'#app',
    data:{
        firstName: 'Dell',
        lastName: 'Lee',
        fullName: 'Dell Lee'
        age:28
    },
    //方法
    watch:{
        firstName(){
            console.log('firstName 改變了，計算一次')        //更新 age 時，這句話不執行，只有更新 fullName 依賴的值 firstName，這句話纔會被執行
            this.fullName = this.firstName + ' ' + this.lastName
        },
        lastName(){
            console.log('lastName 改變了，計算一次')        //更新 age 時，這句話不執行，只有更新 fullName 依賴的值 lastName，這句話纔會被執行
            this.fullName = this.firstName + ' ' + this.lastName
        }
    }
})

使用watch監聽fullName的依賴值，當不是fullName依賴的內容改變時，console.log不會執行，只有當fullName依賴的內容發生改變時，console.log纔會被執行。

雖然watch也能實現數據緩存，性能也不錯，但相比computed來說，複雜了很多，所以如果一個功能既可以通過computed實現，methods實現，watch實現，優先推薦computed來實現，因爲用這種方法寫代碼，既簡潔，性能又不錯。計算屬性，方法，監聽器