參考教程：Vue Mastery

理解響應(yīng)式

什么是響應(yīng)式呢？舉個(gè)簡(jiǎn)單的例子。

let price = 5;
let quantity = 2;
let total = price * quantity; // 10

現(xiàn)在我們將price改為6，期望total值也能自動(dòng)計(jì)算更新為12。
而這個(gè)自動(dòng)計(jì)算更新，就是響應(yīng)式。
這一節(jié)我們先來談?wù)撘幌拢绾斡|發(fā)計(jì)算更新。

如何實(shí)現(xiàn)更新計(jì)算結(jié)果

let price = 5;
let quantity = 2;

let dep = new Set() // 相當(dāng)于收集方法（依賴）的倉(cāng)庫

let effect = () => { // 計(jì)算方法
  total = price * qunatity
}
function track() { // 添加計(jì)算方法到倉(cāng)庫中
  dep.add(effect)
}
function trigger() { // 觸發(fā)倉(cāng)庫中的方法
  dep.forEach(effect => effect())
}

第一步，執(zhí)行effect得到初始的結(jié)果

effect() // total = 10

第二步，我們需要把effect收集起來，以便于需要的時(shí)候再次調(diào)用。

track()

第三步，當(dāng)price發(fā)生改變時(shí)，再次觸發(fā)已收集的方法。

price = 6 // 此時(shí)total還是10
trigger() // 此時(shí)得到total = 12

多個(gè)屬性怎么辦？

上面我們實(shí)現(xiàn)了一個(gè)計(jì)算方法的存儲(chǔ)。
實(shí)際上，每個(gè)對(duì)象會(huì)有多個(gè)屬性。
而每個(gè)屬性，也都有它們各自的dep，來存儲(chǔ)一個(gè)或多個(gè)effect。

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

所以我們建立起一個(gè)大的依賴倉(cāng)庫：depsMap。

const depsMap = new Map()

在depsMap中，用屬性名（如price或qunatity）作為key，用各自的dep作為value。
那么，track方法應(yīng)該這樣寫：

function track(key) {
  let dep = depsMap.get(key)
  if (!dep) { // 找不到就建一個(gè)
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(effect)
}

同時(shí)，trigger方法也要改寫啦：

function trigger(key) {
  let dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => effect())
  }
}

來運(yùn)行一下吧：

let product = { price: 5, quantity: 2 }
let total = 0

let effect = () => { 
  total = product.price * product.quantity
}

effect() // total = 10
track('price')

product.price = 6 // total = 10
trigger('price') // total = 12

多個(gè)對(duì)象怎么辦？

上面我們實(shí)現(xiàn)了一個(gè)對(duì)象的響應(yīng)，接下來我們來探討下多個(gè)對(duì)象的收集方法。
我們需要?jiǎng)?chuàng)建一個(gè)更大的倉(cāng)庫來存儲(chǔ)多個(gè)object，每個(gè)object都有屬于自己的depsMap。

const targetMap = new WeakMap()
// 為什么用WeakMap我們暫時(shí)不討論，目前只需要知道，它的key必須是object類型

function track(target, key) {
  let depsMap = targetMap.get(target)
  if (!depsMap) {  // 找不到就建一個(gè)
    targetMap.set(target, (depsMap = new Map()))
  }
  let dep = depsMap.get(key)
  if (!dep) {
    depsMap.set(key, (dep = new Set()))
  }
  dep.add(effect)
}

function trigger(target, key) {
  const depsMap = targetMap.get(target)
  if (!depsMap) return // 如果沒有任何依賴，直接返回
  let dep = depsMap.get(key)
  if (dep) {
    dep.forEach(effect => effect())
  }
}

來運(yùn)行一下：

let product = { price: 5, quantity: 2 }
let total = 0
const depsMap = new Map()
let effect = () => { 
  total = product.price * product.quantity
}

effect() // total = 10
track('product', 'price')

product.price = 6  // total = 10
trigger('product', 'price') // total = 12

總結(jié)

• targetMap
  用于存放每個(gè)響應(yīng)式object（所有屬性）的依賴
• depsMap
  用于存放響應(yīng)式object每個(gè)屬性對(duì)應(yīng)的依賴

• dep
  用于存放某個(gè)屬性對(duì)應(yīng)的所有依賴，當(dāng)屬性發(fā)生變化時(shí)，會(huì)執(zhí)行依賴

  
  
  image.png