關於VUE響應式數據的最佳解釋

許多前端框架（如Angular,React,Vue）都有本身的響應式引擎。經過理解如何響應，提議提高你的開發能力並可以更高效地使用JS框架。本文中構建的響應邏輯與Vue的源碼是一毛同樣的！

響應系統

初見時，你會驚訝與Vue的響應系統。看看如下面這些簡單代碼

<div id="app">
    <div>Price:${{price}}</div>
    <div>Total:${{price*quantity}}</div>
    <div>Taxes:${{totalPriceWithTax}}</div>
</div>

<script src="https://cdn.jsdeliver.net/npm/vue"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            price: 5.00,
            quantity: 2,
        },
        computed: {
            totalPriceWithTax(){
                return this.price * this.quantity * 1.03
            }
        }
    })
</script>

• 更新頁面上的price
• 從新計算price與quantity的乘積，更新頁面
• 調用totalPriceWithTax函數並更新頁面

等等，你可能會疑惑爲什麼Vue知道price變化了，它是如何跟蹤全部的變化？

這並不是平常的JS編程會用到的

若是你疑惑，那麼最大的問題是業務代碼一般不涉及這些。舉個例子，若是我運行下面代碼：

let price = 5
let quantity = 2
let total = price *quantity
price = 20
console.log(`total is ${total}`)

即使咱們從未使用過Vue，咱們也能知道會輸出10。

>> total is 10

更進一步，咱們想要在price和quantity更新時

total is 40

遺憾的是，JS是一個程序，看着它它也不會變成響應式的。這時咱們須要coding

難題

咱們須要存儲計算的total，以便在price或quantity變化時，從新運行。

解決

首先咱們須要告知應用「下面我要運行的代碼先保存起來，我可能在別的時間還要運行！」以後但咱們更新代碼中price或quantity的值時，以前存儲的代碼會被再次調用。

// save code

let total = price * quantity

// run code

// later on rung store code again

因此經過記錄函數，能夠在變量改變時屢次運行：

let price = 5
let quantity = 2
let total = 0
let target = null
target = function(){
    total = price * quantity
}
record() // 稍後執行
target()

注意target 存儲了一個匿名函數，不過若是使用ES6的箭頭函數語法，咱們能夠寫成這樣：

target = () => {
    total = price * quantity
}

而後咱們再簡單滴定義一下record函數：

let storage = [] //在starage 中存放target函數
function record(){
    storage.push(target)
}

咱們存儲了target（上述例子中就是{ total = price * quantity }），咱們在稍後會用到它，那時使用target，就能夠運行咱們記錄的全部函數。

function target(){
    storage.forEach(run => run())
}

遍歷storage執行其中存儲的全部的匿名函數。在代碼中咱們能夠這樣：

price = 20
console.log(total)  //  => 10
replay()
console.log(total)  //  => 40

足夠簡單吧！若是你想看看目前階段完整的代碼，請看：

let price = 5
let quantity = 2
let quantity = 0
let target = null
let storage = []
function record () {
    storage.push(target)
}
function replay() {
    storage.forEach(run => run())
}
target = () => {
    total = price * quantity
}
record()
target()


price = 20
console.log(total)  // => 10
replay()
console.log(total)  // => 40

難題

功能雖然能夠實現，可是代碼彷佛不夠健壯。咱們須要一個類，來維護目標列表，在須要從新執行時來通知執行。

解決

經過將所須要的方法封裝成一個依賴類，經過這個類實現標準的觀察者模式。
若是咱們使用一個類來管理相關依賴，（這很接近VUE的表現方式）代碼看起來就像下面這樣：

class Dep {
    constructor(){
        this.subscribers = []
    }
    depend() {
        if(target && !this.subscribers.includes(target)){
            this.subscribers.push(target)
        }
    }
    notify() {
        this.subscribers.forEach(sub => sub())
    }
    
}

你會發現如今匿名函數被儲存在subscribers而不是原來的storage。同時，如今的記錄函數叫作depend而不是record，通知函數是notify而非replay。看看他們執行狀況：

const dep = new Dep()
let price = 5
let quantity = 2
let quantity = 0
let target = () => {
    total = price * quantity
}
dep.depend()  //將target添加進subscribers
target()      //執行獲取total


price = 20
console.log(total)  // => 10
dep.notify()
console.log(total)  // => 40

如今代碼的複用性已經初見端倪，可是還有一件彆扭的事，咱們還須要配置與執行目標函數。

難題

之後咱們會爲每一個變量建立一個Dep類，對此咱們應該使用一個watcher函數來監聽並更新數據，而非使用這樣的方式：

let target = () => {
    total = price * quantity
}
dep.depend()  
target()

指望中的代碼應該是：

watcher(() => {
    total = price * quantity
})

解決 實現watcher函數

在watcher函數中咱們作了下面這些事：

function watcher(myFunc){
    target = myFunc
    dep.depend() 
    target()
    target = null 
}

如你所見，watcher接受一個myFunc做爲參數，將其賦值給全局變量target，並將它添加微訂閱者。在執行target後，重置target爲下一輪作準備！
如今只須要這樣的代碼

price = 20
console.log(total)  // => 10
dep.notify()
console.log(total)  // => 40

你可能會疑惑爲何target是一個全局變量的形式，而非做爲一個參數傳入。這個問題在結尾處會明朗起來！

難題

如今咱們擁有了一個簡單的Dep類，但咱們真正想要的是每一個變量都能擁有一個本身的Dep類。先讓咱們把以前討論的特性變成一個對象吧！

let data = { price: 5,quantity: 2}

咱們先假設，每一個屬性都有本身的Dep類：

如今咱們運行

watcher(() => {
    totla = data.price * data.quantity
})

因爲total須要依賴price和quantity兩個變量，因此這個匿名函數須要被寫入二者的subscriber數組中！
同時若是咱們又有一個匿名函數，只依賴data.price，那麼它僅須要被添加進price的dep的subscriber數組中

但咱們改變price的值時，咱們期待dep.notify()被執行。在文章的最末，咱們期待可以有下面這樣的輸出：

>> total
10
>> price =20
>> total
40

因此如今咱們須要去掛載這些屬性（如quantity和price）。這樣當其改變時就會觸發subscriber數組中的函數。

解決 Object.defineProperty()

咱們須要瞭解Object.defineProperty函數
ES5種提出的，他容許咱們爲一個屬性定義getter與setter函數。在咱們把它和Dep結合前，我先爲大家演示一個很是基礎的用法：

let data = { price: 5,quantity: 2}
Object.defineProperty(data,'price',{
    get(){
        console.log(`Getting price ${internalValue}`);
        return internalValue
    }
    set(newValue){
        console.log(`Setting price ${newValue}`);
        internalValue = newValue
    }
})
total = data.price * data.quantity  // 調用get
data.price = 20                      //  調用set

如今當咱們獲取並設置值時，咱們能夠觸發通知。經過Object.keys(data)返回對象鍵的數組。運用一些遞歸，咱們能夠爲數據數組中的全部項運行它。

let data = { price: 5,quantity: 2}
Object.keys(data).forEach((key) => {
    let internalValue = data[key]
    Object.defineProperty(data, key,{
        get(){
            console.log(`Getting ${key}:${internalValue}`);
            return internalValue
        }
        set(newValue){
            console.log(`Setting ${key} to ${newValue}`);
            internalValue = newValue
        }
    })
})
total = data.price * data.quantity  
data.price = 30

如今你能夠在控制檯上看到：

Getting price: 5
Getting quantity: 20
Setting price to 30

成親了

total = data.price * data.quantity

相似上述代碼運行後，得到了price的值。咱們還指望可以記錄這個匿名函數。當price變化或事被賦予了一個新值（譯者：感受這是一回事）這個匿名函數就會被促發。

Get => 記住這個匿名函數，在值變化時再次執行！
Set => 值變了，快去執行剛纔記下的匿名函數

就Dep而言：
Price被讀 => 調用dep.depend()保存當前目標函數
Price被寫 => 調用dep.notify()去執行全部目標函數

好的，如今讓咱們將他們合體，並祭出最後的代碼。

let data = {price: 5,quantity: 2}
let target = null
class Dep {
    constructor(){
        this.subscribers = []
    }
    depend() {
        if(target && !this.subscribers.includes(target)){
            this.subscribers.push(target)
        }
    }
    notify() {
        this.subscribers.forEach(sub => sub())
    }
}

Object.keys(data).forEach((key) => {
    let internalValue = data[key]
    const  dep = new Dep()
    Object.defineProperty(data, key,{
        get(){
            dep.depend()
            return internalValue
        }
        set(newValue){
            internalValue = newValue
            dep.notify()
        }
    })
})
function watcher(myFunc){
    target = myFunc
    target();
    target = null;
}
watch(() => {
    data.total = data.price * data.quantity
})

猜猜看如今會發生什麼？

>> data.total
10
>> data.price = 20
20
>> data.total
40
>> data.quantity = 3 
3
>> data.total
60

正如咱們所期待的那樣，price 和 quantity如今是響應式的了！當price 和 quantity更跟新時，被監聽函數會被從新執行！
如今你應該能夠理解Vue文檔中的這張圖片了吧！

看到圖中紫色數據圈getter和setter嗎？看起來應該很熟悉！每一個組件實例都有一個watcher實例（藍色），它從getter（紅線）收集依賴項。稍後調用setter時，它會通知觀察者致使組件從新渲染。下圖是一個我註釋後的版本。

雖然Vue實際的代碼願彼此複雜，但你如今知道了基本的實現了。

那麼回顧一下

• 咱們建立一個Dep類來收集依賴並從新運行全部依賴（notify）
• watcher函數來將須要監聽的匿名函數，添加到target
• 使用Object.defineProperty()去建立getter和setter