computed被叫做計(jì)算屬性：

1.在頁(yè)面中使用大量或是復(fù)雜的表達(dá)式去處理數(shù)據(jù)，對(duì)頁(yè)面的維護(hù)會(huì)有很大的影響。這個(gè)時(shí)候就需要用到computed 計(jì)算屬性來(lái)處理復(fù)雜的邏輯運(yùn)算，這樣在頁(yè)面中就可以簡(jiǎn)單的寫(xiě)成{{bookmark}}，computed一般是改變data或者props里面的值為己用。

computed: {
            bookmark() {
               //這里用了es6書(shū)寫(xiě)方法
                return this.$store.state.bookmarks.find(bookmark => bookmark.id === this.bookmarkId);
            },
}

<div>{{bookmark}}</div>

2.computed的值不可以在data中定義和賦值

watch被叫做偵聽(tīng)器：
1.雖然計(jì)算屬性在大多數(shù)情況下是非常適合的，但是在有些情況下我們需要自定義一個(gè)watcher，當(dāng)需要在數(shù)據(jù)變化時(shí)執(zhí)行異步或開(kāi)銷(xiāo)較大的操作時(shí)，這時(shí)watch是非常有用的。

watch: {
            // 如果 `name` 發(fā)生改變，這個(gè)函數(shù)就會(huì)運(yùn)行
            question: function(newQuestion) {
                this.answer = 'Waiting for you to stop typing...'
                this.getAnswer()
            }
        },
methods: {
            // `_.debounce` 是一個(gè)通過(guò) Lodash 限制操作頻率的函數(shù)。
            // 在這個(gè)例子中，我們希望限制訪問(wèn) yesno.wtf/api 的頻率
            // AJAX 請(qǐng)求直到用戶(hù)輸入完畢才會(huì)發(fā)出。想要了解更多關(guān)于
            // `_.debounce` 函數(shù) (及其近親 `_.throttle`) 的知識(shí)，
            // 請(qǐng)參考：https://lodash.com/docs#debounce
            getAnswer: _.debounce(
                function() {
                    if(this.question.indexOf('?') === -1) {
                        this.answer = 'Questions usually contain a question mark. ;-)'
                        return
                    }
                    this.answer = 'Thinking...'
                    var vm = this
                    axios.get('https://yesno.wtf/api')
                        .then(function(response) {
                            vm.answer = _.capitalize(response.data.answer)
                        })
                        .catch(function(error) {
                            vm.answer = 'Error! Could not reach the API. ' + error
                        })
                },
                // 這是我們?yōu)榕卸ㄓ脩?hù)停止輸入等待的毫秒數(shù)
                500
            )
        }

在這個(gè)示例中，使用 watch 選項(xiàng)允許我們執(zhí)行異步操作 (訪問(wèn)一個(gè) API)，限制我們執(zhí)行該操作的頻率，并在我們得到最終結(jié)果前，設(shè)置中間狀態(tài)。這些都是計(jì)算屬性無(wú)法做到的。
2.watch可以進(jìn)行深度監(jiān)聽(tīng)，監(jiān)聽(tīng)對(duì)象的變化。

data() {
            return {
                group: {
                        data1: '1',
                        data2: '2',
                        data3:'3'
                },
            }
}

如果我們要監(jiān)聽(tīng)group的data1的變化

watch: {
     group: {
         data1: function() {
            //do something
         },
         deep: true
     }
}

里面的deep設(shè)為了true，這樣的話(huà)，如果修改了這個(gè)group中的任何一個(gè)屬性，都會(huì)執(zhí)行handler這個(gè)方法。不過(guò)其實(shí)這樣開(kāi)銷(xiāo)是蠻大的，尤其是對(duì)象里面結(jié)構(gòu)嵌套過(guò)深的時(shí)候。而且有時(shí)候我們就想關(guān)心這個(gè)對(duì)象中的某個(gè)屬性，比如data3，這個(gè)時(shí)候可以這樣：

'group.data3'(newVal) {
        console.log(newVal);
 },

有不完美之處歡迎大家多提意見(jiàn)~~