watch在Vue.js中的使用方法詳解

這篇文章主要介紹了Vue.js 中的 $watch使用方法，小編覺得挺不錯的，現在分享給大家，也給大家做個參考。一起跟著小編過來看看吧

這兩天學習了Vue.js 中的 $watch這個地方知識點挺多的，而且很重要，所以，今天添加一點小筆記。

github 原始碼 

Observer, Watcher, vm 可謂Vue 中比較重要的部分，偵測資料變動後視圖更新的重要環節。下面我們來看看 如何實作一個簡單的 $watch 功能，當然Vue 中使用了許多最佳化手段，在本文中暫不一一討論。

範例:

// 创建 vm
let vm = new Vue({
 data: 'a'
})

// 键路径
vm.$watch('a.b.c', function () {
 // 做点什么
})

先闡明在這個demo 以及Vue 中，它們的關係：

vm 呼叫$watch 後，首先呼叫observe 函數創建Observer 實例觀察數據，Observer 又創建Dep , Dep 用來維護訂閱者。然後建立 Watcher 實例提供 update 函數。一旦資料變動，就層層執行回呼函數。

Observer和observe

遞歸呼叫 observe 函式建立 Observer。在建立 Observer 的過程中，使用 Object.defineProperty() 函數為其新增 get set 函數， 並建立 Dep 實例。

export function observe (val) {
 if (!val || typeof val !== 'object') {
  return
 }
 return new Observer(val)
}

function defineReactive (obj, key, val) {
 var dep = new Dep()

 var property = Object.getOwnPropertyDescriptor(obj, key)
 // 是否允许修改
 if (property && property.configurable === false) {
  return
 }

 // 获取定义好的 get set 函数
 var getter = property && property.get
 var setter = property && property.set

 var childOb = observe(val)
 Object.defineProperty(obj, key, {
  enumerable: true,
  configurable: true,
  get: () => {
   var value = getter ? getter.call(obj) : val
   // 说明是 Watcher 初始化时获取的, 就添加订阅者
   if (Dep.target) {
    dep.depend()
    if (childOb) {
     childOb.dep.depend()
    }
    // if isArray do some....
   }
   return value
  },
  set: (newVal) => {
   var value = getter ? getter.call(obj) : val
   if (value === newVal) {
    return
   }
   if (setter) {
    setter.call(obj, newVal)
   } else {
    val = newVal
   }
   childOb = observe(newVal)
   dep.notify()
  }
 })
}

你可能會疑問 Dep.target 是個什麼鬼？

以上是watch在Vue.js中的使用方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！