javascript - vue中的computed和watch到底有什麼不同?
高洛峰
高洛峰 2017-05-19 10:24:39
0
4
566

如題,在vue.js官方文件中看到computed和watch取得全名的一個例子:

var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar',
    fullName: 'Foo Bar'
  },
  watch: {
    firstName: function (val) {
      this.fullName = val + ' ' + this.lastName
    },
    lastName: function (val) {
      this.fullName = this.firstName + ' ' + val
    }
  }
})
var var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  computed: {
    fullName: function () {
      return this.firstName + ' ' + this.lastName
    }
  }
})

菜鳥表示不太懂他們之間的區別,難道watch就不可以像computed那樣來獲取嗎?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(4)
洪涛

用computed程式碼寫的少,沒什麼主要差別

大家讲道理

我覺得還是有差別的,而且兩種應用的情形應該要區分。

計算屬性是計算屬性,觀察是觀察。

計算屬性顧名思義就是透過其他變數計算得來的另一個屬性,fullName在它所依賴firstName,lastName這兩個變數變化時重新計算自己的值。

另外,計算屬性具有快取。計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。這意味著只要 lastName和firstName都沒有改變,多次存取 fullName計算屬性會立即傳回先前的計算結果,而不必再執行函數。

而觀察watch是觀察一個特定的值,當該值變化時執行特定的函數。例如分頁元件中,我們可以偵測頁碼執行取得資料的函數。

可以再詳細的檢視一下文件:https://cn.vuejs.org/v2/guide...

某草草

更具可讀性,以及通常來說更少的程式碼。

为情所困

簡單來看computed是基於快取進行的,watch等於一個函數。個人覺得會用就好了,具體區別移駕具體區別

覺得還是計算屬性用的能廣泛一些吧

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板