vue入門筆記體系（四）computed和watch

sevencui發表於2019-02-16
Vue筆記

computed

場景：當需要對data的資料進行顯示計算時；

<div id="example">
  <p>Original message: "{{ message }}"</p>
  <p>Computed reversed message: "{{ reversedMessage }}"</p>
</div>
var vm = new Vue({
  el: `#example`,
  data: {
    message: `Hello`
  },
  computed: {
    // 計算屬性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 例項
      return this.message.split(``).reverse().join(``)
    }
  }
})

計算屬性快取 vs 方法

計算屬性是基於它們的依賴進行快取的。計算屬性只有在它的相關依賴發生改變時才會重新求值。（不接受新的引數，只是基於data裡面的資料進行計算）
方法是隻要其他資料發生變化，觸發重新渲染時，呼叫方法將總會再次執行函式，效能開銷比較大。（可以接受引數）

watch

場景：監聽到資料的變化，去指定響應的操作

var vm = new Vue({
  data: {
    a: 1,
    b: 2,
    c: 3,
    d: 4,
    e: {
      f: {
        g: 5
      }
    }
  },
  watch: {
    a: function (val, oldVal) { //變化後的值，變化前的值
      console.log(`new: %s, old: %s`, val, oldVal)
    },
    // 方法名
    b: `someMethod`,
    // 深度 watcher，可以觀察objecct的所有資料變化，效能開銷比較大；可以監聽`e.a`這個屬性進行監聽
    c: {
      handler: function (val, oldVal) { /* ... */ },
      deep: true
    },
    // 該回撥將會在偵聽開始之後被立即呼叫
    d: {
      handler: function (val, oldVal) { /* ... */ },
      immediate: true
    },
    e: [
      function handle1 (val, oldVal) { /* ... */ },
      function handle2 (val, oldVal) { /* ... */ }
    ],
    // watch vm.e.f`s value: {g: 5}
    `e.f`: function (val, oldVal) { /* ... */ }
  }
})
vm.a = 2 // => new: 2, old: 1

相關文章