Vue實例方法/數據

vm.$watch( expOrFn, callback, [options] )

• 參數：

  {string | Function} expOrFn

  {Function | Object} callback

  {Object} [options]

    {boolean} deep
  
    {boolean} immediate
  

• 返回值：{Function} unwatch

• 用法：觀察 Vue 實例變化的一個表達式或計算屬性函數。回調函數得到的參數爲新值和舊值。表達式只接受監督的鍵路徑。對於更復雜的表達式，用一個函數取代。

• 注意：在變異 (不是替換) 對象或數組時，舊值將與新值相同，因爲它們的引用指向同一個對象/數組。Vue 不會保留變異之前值的副本。

• 示例：

// 鍵路徑
vm.$watch('a.b.c', function (newVal, oldVal) {
  // 做點什麼
})

// 函數
vm.$watch(
  function () {
    // 表達式 `this.a + this.b` 每次得出一個不同的結果時
    // 處理函數都會被調用。
    // 這就像監聽一個未被定義的計算屬性
    return this.a + this.b
  },
  function (newVal, oldVal) {
    // 做點什麼
  }
)
vm.$watch 返回一個取消觀察函數，用來停止觸發回調：

var unwatch = vm.$watch('a', cb)
// 之後取消觀察

unwatch()

• 選項：deep

爲了發現對象內部值的變化，可以在選項參數中指定 deep: true 。注意監聽數組的變動不需要這麼做。

vm.$watch('someObject', callback, {
  deep: true
})
vm.someObject.nestedValue = 123
// callback is fired
選項：immediate

在選項參數中指定 immediate: true 將立即以表達式的當前值觸發回調：

vm.$watch('a', callback, {
  immediate: true
})
// 立即以 `a` 的當前值觸發回調

注意在帶有 immediate 選項時，你不能在第一次回調時取消偵聽給定的 property。

// 這會導致報錯
var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    unwatch()
  },
  { immediate: true }
)

如果你仍然希望在回調內部調用一個取消偵聽的函數，你應該先檢查其函數的可用性：

var unwatch = vm.$watch(
  'value',
  function () {
    doSomething()
    if (unwatch) {
      unwatch()
    }
  },
  { immediate: true }
)

vm.$set( target, propertyName/index, value )

• 參數：

  {Object | Array} target

  {string | number} propertyName/index

  {any} value

• 返回值：設置的值。

• 用法：

這是全局 Vue.set 的別名。

vm.$delete( target, propertyName/index )

• 參數：

  {Object | Array} target

  {string | number} propertyName/index

• 用法：這是全局 Vue.delete 的別名。