vue中的computed和watch區別

在vue.js官方文檔中看到computed和watch獲取全名的一個例子：

 1 var var vm = new Vue({
 2   el: '#demo',
 3   data: {
 4     firstName: 'Foo',
 5     lastName: 'Bar',
 6     fullName: 'Foo Bar'
 7   },
 8   watch: {
 9     firstName: function (val) {
10       this.fullName = val + ' ' + this.lastName
11     },
12     lastName: function (val) {
13       this.fullName = this.firstName + ' ' + val
14     }
15   }
16 })

 1 var var vm = new Vue({
 2   el: '#demo',
 3   data: {
 4     firstName: 'Foo',
 5     lastName: 'Bar'
 6   },
 7   computed: {
 8     fullName: function () {
 9       return this.firstName + ' ' + this.lastName
10     }
11   }
12 })

計算屬性顧名思義就是經過其餘變量計算得來的另外一個屬性，fullName在它所依賴firstName，lastName這兩個變量變化時從新計算本身的值。

另外，計算屬性具備緩存。計算屬性是基於它們的依賴進行緩存的。計算屬性只有在它的相關依賴發生改變時纔會從新求值。這就意味着只要 lastName和firstName都沒有發生改變，屢次訪問 fullName計算屬性會當即返回以前的計算結果，而沒必要再次執行函數。

而觀察watch是觀察一個特定的值，當該值變化時執行特定的函數。例如分頁組件中，咱們能夠檢測頁碼執行獲取數據的函數。