Vue.js設計與實現(xiàn)分支切換與清除學習總結

更新時間：2023年05月31日 14:48:54 作者：瑪拉_以琳

這篇文章主要為大家介紹了Vue.js設計與實現(xiàn)分支切換與清除學習總結，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

分支切換

const data = { ok: true, text: 'hello world' }
const obj = new Proxy(data, {/*....*/}
effect(function effectFn () {
    document.body.innerText = obj.ok ? obj.text : 'not'
})

如上代碼, effectFn函數(shù)中存在三元表達式, 根據(jù)obj的ok屬性的值執(zhí)行響應的代碼, ok屬性改變時, 執(zhí)行的代碼也會改變, 就是所謂分支切換. 在effectFn中, 若ok的值為true, 會觸發(fā)ok與text的讀取操作, 因此該函數(shù)與這兩個響應數(shù)據(jù)都建立了聯(lián)系, 如下圖:

但是當ok為false時, 不會對text進行讀取操作, 因此無論text的值怎么改變, DOM都不會進行更新, 但是因為與輔助用函數(shù)進行了綁定, 函數(shù)依然會運行, 這是不應該的.

為要解決這個問題, 可以在每次副作用函數(shù)執(zhí)行時, 可以先將其從所有與之關聯(lián)的集合中刪除. 因此就需要記錄哪些集合中(就是上圖中的Set)含有該副作用函數(shù), 可以給副作用函數(shù), 添加一個屬性, 值為數(shù)組用于記錄, 如下代碼:

// 使用全局變量儲存被注冊的副作用函數(shù)
let activeEffect = undefined
function effect (fn) {
    const effectFn = () => {
        // 當 effectFn 執(zhí)行時, 將其設置為當前激活的副作用函數(shù)
        activeEffect = effectFn
        fn()
    }
    // activeEffect.deps 用與儲存所有包含該副作用函數(shù)(即關聯(lián)該副作用函數(shù))的集合 Set
    activeEffect.deps = []
    // 執(zhí)行副作用函數(shù)
    effectFn()
 }

在副作用函數(shù)是Proxy中的攔截讀取操作時綁定的, 因此可以在攔截讀取操縱中收集包含該副作用函數(shù)的集合:

function track (target, key) {
    // 沒有 activeEffect 直接結束
    if (activeEffect) return
    // 根據(jù) target 從 WeakMap中獲取 Map
    let depsMap = bucket.get(target)
    if (!depsMap) bucket.set(target, (depsMap = new Map()))
    let desp = depsMap.get(key)
    if (!deps) depsMap.set(key, (deps = new Set()))
    // 將當前激活的副作用函數(shù)添加到依賴集合中
    deps.add(activeEffect)
    // deps 就是存有當前副作用函數(shù)的集合, 即存在聯(lián)系的依賴集合
    // 將其添加到 activeEffect.deps 中
    activeEffect.deps.push(deps)
}

關系如下圖:

清除依賴

根據(jù)上圖的聯(lián)系, 就可以在副作用函數(shù)每次執(zhí)行時, 根據(jù) effectFn.deps 將副作用函數(shù)從依賴中(Set)刪除

// 使用全局變量儲存被注冊的副作用函數(shù)
let activeEffect = undefined
function effect (fn) {
    const effectFn = () => {
        // 調(diào)用 cleanup 函數(shù)完成清理
        cleanup(effectFn)
        // 當 effectFn 執(zhí)行時, 將其設置為當前激活的副作用函數(shù)
        activeEffect = effectFn
        fn()
    }
    // activeEffect.deps 用與儲存所有包含該副作用函數(shù)(即關聯(lián)該副作用函數(shù))的集合 Set
    activeEffect.deps = []
    // 執(zhí)行副作用函數(shù)
    effectFn()
 }
 function cleanup(effectFn) {
     // 遍歷數(shù)組
     for (let item of effectFn.deps){
         // item 就是副作用函數(shù)集合(Set)
         item.delete(effectFn)
     }
     // 最后重置數(shù)組
     effectFn.deps.length = 0
 }

但此時會導致現(xiàn)在的響應式代碼出現(xiàn)無限循環(huán), 問題出在攔截設置操作中:

function trigger (target, key) {
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    effects && effects.forEach(fn => fn()) // 問題出在這一行
}

上面代碼中, 最后一行遍歷的effects實際上就是當前key的副作用集合Set, 在遍歷中副作用函數(shù)會運行, 此時會cleanup進行清除, 但是副作用函數(shù)的執(zhí)行又會將其重新被收集到同一個集合中, 出現(xiàn)了一邊刪除該函數(shù)一邊收集該函數(shù)導致死循環(huán). 可以用另一個SSet進行遍歷

function trigger (target, key) {
    const depsMap = bucket.get(target)
    if (!depsMap) return
    const effects = depsMap.get(key)
    const effectsToRun = new Set(effects)
    effectsToRun.forEach(fn => fn())
}

目前為止響應式完整代碼

// 儲存副作用函數(shù)的桶
  const bucket = new WeakMap()
  // 用于儲存被注冊的副作用的函數(shù)
  let activeEffect = undefined
  function cleanup (effectFn) {
    for (let itme of effectFn.deps) {
      itme.delete(effectFn)
    }
    effectFn.deps.length = []
  }
  function effect (fn) {
    const effectFn = () => {
      cleanup(effectFn)
      activeEffect = effectFn
      fn()
    }
    effectFn.deps = []
    effectFn()
  }
  const data = {
    text: 'hello world',
    ok: true
  }
  const obj = new Proxy(data, {
    // 攔截讀取操作
    get (target, key) {
      track(target, key)
      // 返回屬性值
      return target[key]
    },
    // 攔截設置操作
    set (target, key, newVal) {
      // 設置屬性值
      target[key] = newVal
      trigger(target, key)
    }
  })
  function track (target, key) {
    // 沒有 activeEffect, 直接 return
    if (!activeEffect) return target[key]
    // 根據(jù) target 從'桶'中回去 depsMap, 它也是一個 Map 類型: key ---> effects
    let depsMap = bucket.get(target)
    // 如果 depsMap 不存在, 則新建一個 Map 并與 target 關聯(lián)
    if (!depsMap) bucket.set(target, (depsMap = new Map()))
    // 再根據(jù) key 從depsMap 中去的 deps, 它是一個 Set 類型
    // 里面存貯所有與當前 key 相關的副作用函數(shù): effects
    let deps = depsMap.get(key)
    // 如果 deps 不存在, 同樣新建一個 Set 并與 key 關聯(lián)0
    if (!deps) depsMap.set(key, (deps = new Set()))
    // 最后將當前激活的副作用函數(shù)添加到'桶'里
    deps.add(activeEffect)
  }
  function trigger (target, key) {
    // 根據(jù) target 從'桶'中取得 depsMap, 它是 key --> effects
    const depsMap = bucket.get(target)
    if (!depsMap) return
    // 根據(jù) key 取得所有的副作用函數(shù) effects
    const effects = depsMap.get(key)
    // 執(zhí)行副作用函數(shù)
    // effects && effects.forEach(fn => fn())
    const effectsFnRun = new Set(effects)
    effectsFnRun.forEach(fn => fn())
  }
  effect(() => {
    console.log('effect run');
    document.body.innerText = obj.ok ? obj.text : 'not'
  })
  setTimeout(() => {
    obj.ok = false
  }, 2000)

以上就是Vue.js設計與實現(xiàn)分支切換與清除學習總結的詳細內(nèi)容，更多關于Vue.js分支切換清除的資料請關注腳本之家其它相關文章！

您可能感興趣的文章: