VUE之computed和watch應用與區別

目錄：

• computed
• watch

computed

計算結果並返回，只有當被計算的值發生改變時才會觸發
(即：計算屬性的結果會被快取，除非依賴的響應式屬性變化才會重新計算)

new Vue({
    el: '#id',
    template: `<div>
        <span>Name: {{name}}<span>
    </div>`,
    data: {
        firstName: 'Leo',
        lastName: 'Alan'
 

    },
    computed: {
        name () {
            return `${this.firstName} + ${this.lastName}`
        }
    }
})

watch

監聽某一個值，當被監聽的值發生變化時，執行對應的操作
(與computed的區別是，watch更加適用於監聽某一個值的變化並做對應的操作，比如請求後臺介面等，而computed適用於計算已有的值並返回結果)

new Vue({
    el: '#id',
    template: `<div>
        // ...
    </div>`,
    data: {
        firstName: 'Leo'
 
,
        lastName: 'Alan',
        obj1: {
            a: 0
        }
    },
    watch: {
        // 監聽firstName,當firstName發生變化時就會執行該函式
        firstName () {
            // 執行需要的操作...
            // 注:初始化不會執行，只有當被監聽的值(firstName)發生變化時才會執行
        },

        // 監聽lastName
        lastName: {
            handler (newName, oldName) {
                // 執行需要的操作...
 

            },
            immediate: true // true: 初始化時就會先執行一遍該監聽對應的操作    
        },

        obj1: {
            handler () {
                // 執行需要的操作...
            },
            deep: true // 該屬性預設值為false. 
            // 當被監聽的值是物件,只有deep為true時,對應屬性的值(obj1.a)發生變化時才能觸發監聽事件，但是這樣非常消耗效能
        },

        // 監聽物件具體的屬性， deep就不需要設定為true了
        'obj1.a': {
            handler () {
                // 執行需要的操作...
            }
        }

    }
})

注意： 不要在computed和watch中修改被依賴(或者被監聽)的值，這樣可能會導致無限迴圈