Vue.js是一款流行的前端框架，它的核心理念是數據驅動視圖，這樣可以讓我們更加專注于業務邏輯而不是DOM操作。Vue.js使用了響應式系統來實現數據驅動視圖，其中的Dep和Watcher扮演著非常重要的角色。

Dep，全稱Dependency，在Vue.js中是一個用于維護響應式系統依賴關系的類。每個響應式對象都會擁有一個Dep實例，當對象中的屬性被讀取或者修改時，就會觸發Dep實例的相關操作。

class Dep {
constructor() {
// 存儲所有的Subscriber
this.subscribers = []
}
// 添加一個Subscriber
addSubscriber(subscriber) {
this.subscribers.push(subscriber)
}
// 通知所有Subscriber
notify() {
this.subscribers.forEach(s =>s.update())
}
}

Watcher是一個用于觀察響應式對象的表達式的類。當表達式中使用的響應式屬性被修改時，Watcher會自動更新對應的視圖。Watcher和Dep之間存在依賴關系，每個Watcher實例都會在實例化時將自己添加到對應響應式屬性的Dep實例中去。

class Watcher {
constructor(vm, expOrFn, cb) {
this.vm = vm // 對應Vue實例
this.expOrFn = expOrFn // 表達式或函數
this.cb = cb // 回調函數
this.value = this.get() // 執行表達式，將Watcher實例添加到Dep中
}
// 從Dep中收到通知
update() {
const oldValue = this.value
const newValue = this.get()
if (oldValue !== newValue) {
this.cb.call(this.vm, newValue, oldValue)
}
}
// 執行表達式
get() {
Dep.target = this // 將當前Watcher實例賦值給Dep.target
const value = this.expOrFn.call(this.vm) // 執行表達式
Dep.target = null // 執行完畢后，將Dep.target清空
return value
}
}

在Vue.js中，每個組件都會擁有一個對應的Watcher實例，當組件中的數據發生變化時，Watcher實例就會被通知更新視圖。Watcher實例的創建和銷毀都是自動進行的，不需要用戶手動干預。