這篇文章主要介紹了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中文網其他相關文章！
