Vue3雙向綁定實現原理及應用案例

一、Vue3雙向綁定的概念

雙向綁定是現代前端框架的一項重要特性，它能夠讓視圖和數據之間保持同步。在Vue中，我們一般通過採用v-model指令來實現雙向綁定。

在Vue3中，雙向綁定的實現原理借鑒了React的思路。即通過使用可觀察對象(obj)和Proxy實現監聽數據更新，並在更新時自動更新視圖。下面讓我們了解一下Vue3雙向綁定的實現方式。

二、Vue3雙向綁定的實現方式

Vue3中雙向綁定的實現方式主要涉及兩個核心概念：可觀察對象(obj)和Proxy。可觀察對象指的是一個被Vue監聽的對象，它裡面的屬性變化都會被Vue監聽到，並觸發相應的回調。而Proxy則是ES6的新特性，它可以用來代理某個對象，當這個對象的屬性被訪問和修改時，會自動觸發相應的操作。

1、可觀察對象(obj)的實現

  
  const reactive = (target) => {
    const handler = {
      get(target, key, receiver) {
        const res = Reflect.get(target, key, receiver)
        track(target, key) // 收集依賴
        return res
      },
      set(target, key, value, receiver) {
        const oldValue = target[key]
        const res = Reflect.set(target, key, value, receiver)
        if (oldValue !== res) {
          trigger(target, key) // 觸發更新
        }
        return res
      },
    }
    return new Proxy(target, handler)
  }
  

上面代碼中的reactive方法接受一個對象作為參數，返回一個可觀察對象。通過Proxy我們攔截了這個對象上面屬性的讀寫操作，並在操作時進行收集依賴(track)和觸發更新(trigger)的操作。

2、Proxy的實現

  
  const targetMap = new WeakMap()
  
  const track = (target, key) => {
    let map = targetMap.get(target)
    if (!map) {
      map = new Map()
      targetMap.set(target, map)
    }
    let dep = map.get(key)
    if (!dep) {
      dep = new Set()
      map.set(key, dep)
    }
    dep.add(effect)
  }
  
  const trigger = (target, key) => {
    const map = targetMap.get(target)
    if (!map) return
    const dep = map.get(key)
    if (!dep) return
    for (const effect of dep) {
      effect()
    }
  }
  
  const effectStack = []
  
  const effect = (fn) => {
    const rxEffect = () => {
      try {
        effectStack.push(rxEffect)
        fn()
      } finally {
        effectStack.pop()
      }
    }
    rxEffect()
  }
  

上面的代碼定義了三個方法：track、trigger和effect。其中，track用於收集依賴，trigger用於觸發更新，而effect則是Vue3中的響應式更新函數，在調用過程中會將當前effect(即正在執行的更新函數)添加到effectStack中。

三、Vue3雙向綁定的應用案例

下面我們通過一個具體的案例來演示Vue3雙向綁定的實現。我們假設有一個計數器，在頁面中顯示當前的計數值，並提供加一、減一和重置的功能。

const App = {

data() {

return { count: 0 }

},

template: `
{{ count }}
  加一
  減一
  重置
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-tw/n/269973.html