1. 程式人生 > >computed watch methods

computed watch methods

事件 實例 類型 content 做出 每次 作用域 時間 對象

methods是個方法,比如你點擊事件要執行一個方法,這時候就用methods,
computed是計算屬性,實時響應的,比如你要根據data裏一個值隨時變化做出一些處理,就用computed。

寫法上的區別是computed計算屬性的方式在用屬性時不用加(),而methods方式在使用時要像方法一樣去用,必須加()

兩種方式在緩存上也大有不同,利用computed計算屬性是將 content與message綁定,只有當message發生變化時才會觸發content,而methods方式是每次進入頁面都要執行該方法,但是在利用實時信息時,比如顯示當前進入頁面的時間,必須用methods方式

watch

  • 類型

{ [key: string]: string | Function | Object }

一個對象,鍵是需要觀察的表達式,值是對應回調函數。值也可以是方法名,或者包含選項的對象。Vue 實例將會在實例化時調用 $watch(),遍歷 watch 對象的每一個屬性。

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3
  },
  watch: {
    // 監控a變量變化的時候,自動執行此函數
    a: function (val, oldVal) {
      console.log(‘new: %s, old: %s‘, val, oldVal)
    },
    
// 深度 watcher c: { handler: function (val, oldVal) { /* ... */ }, deep: true } } }) vm.a = 2 // -> new: 2, old: 1 //註意,不應該使用箭頭函數來定義 watcher 函數 (例如 searchQuery: newValue => this.updateAutocomplete(newValue))。理由是箭頭函數綁定了父級作用域的上下文,所以 this 將不會按照期望指向 Vue 實例,this.updateAutocomplete 將是 undefined。

computed watch methods