快捷導(dǎo)航

vue3實現(xiàn)v-model原理詳解

更新時間：2019年10月09日 09:45:38 作者：愛學(xué)習(xí)的老A@羅學(xué)

這篇文章主要介紹了vue3實現(xiàn)v-model原理詳解，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

vue3 源碼正式放出來了，想必大家也都開始爭先恐后的學(xué)習(xí) vue3 的知識了。由于 vue3 已經(jīng)不再支持 v-model 了，而使用 .sync 來代替，但是為了這篇文章可以幫助大家快速了解 vue 的雙向綁定實現(xiàn)原理，部分使用了 vue2.x v-model 的實現(xiàn)原理

proxy 的基礎(chǔ)知識，相信大家已經(jīng)都很了解了，讓我們一起來回顧一下吧

proxy 是對一個對象的代理，并返回一個已代理的對象，已代理的對象如果發(fā)生任何 set 跟 get 的方法都可以被捕獲到，我們寫一個簡單的 :chestnut:

const target = {
 a: 1
}
const handers = {
 get() {
  // 當(dāng)對 observed.a 進行取值時會觸發(fā)
 },
 set() {
  // 當(dāng)對 observed.a 進行賦值時會觸發(fā)
 },
 // 還有一些額外的參數(shù)如 has 等，這里用不到，就不多說了
 ....
}
const observed = new Proxy(target, handers)

這樣我們就可以對 target 對象設(shè)置了一層代理，當(dāng)我們對 target 進行取賦值操作的時候就可以接可以截獲到它的行為了，但是如果你以為就只有這么簡單你就錯了。

我們把 target 改寫成多層嵌套

const target = {
 a: {
  b: 1
 }
}

...

const observed = new Proxy(target, handers)

我們再獲取 observed.a.b = 2 的時候，get 方法取到的是 a 的值 { b: 1 }, 而 set 并不會觸發(fā)。這也說明了 proxy 只能代理一層對象，不能深層代理！

那么我們需要監(jiān)聽到嵌套的對象怎么辦？

其實這個也不難，就是在 get 的時候判斷一下得到的值是不是對象，如果是對象的話就在對它代理一層，直到最后一層，全部代理完為止，這里就需要一個遞歸函數(shù)

const target = {
 a: {
  b: 1
 }
}

function reactive(data: any) {
 const handers = {
  get(target, key, receiver) {
   const res = Reflect.get(target, key, receiver);
   if (isObject(res)) {
    data[key] = reactive(res);
   }
   return target[key];
  }
 }
 const observed = new Proxy(target, handers)
}

這樣我們就可以對目標(biāo)函數(shù)內(nèi)部的所有屬性進行深層監(jiān)聽了，但是這樣還是不夠，因為我們每次取值的時候都會設(shè)置代理這樣會導(dǎo)致代碼無限循環(huán)->死循環(huán)，所以我們需要做一層判斷，如果已經(jīng)設(shè)置了代理的或這已經(jīng)是代理的對象就不需要在此設(shè)置代理了。又因為我們要儲存對象的映射，所以需要使用map函數(shù)。下面是reactive完整的代碼。

const rawToReactive: WeakMap<any, any> = new WeakMap();
const reactiveToRaw: WeakMap<any, any> = new WeakMap();

function reactive(data: any) {
 // 已經(jīng)有代理
 let observed = rawToReactive.get(data);
 if (observed !== void 0) {
  return observed;
 }
 // 這個數(shù)據(jù)已經(jīng)是代理
 if (reactiveToRaw.has(data)) {
  return data;
 }
 const handler = {
  get: function(target: any, key: string, receiver: any) {
   const res = Reflect.get(target, key, receiver);
   if (isObject(res)) {
    data[key] = data[key] = reactive(res);
   }
   return target[key];
  },
  set: function(target: any, key: string, value: any) {
   // 將新值賦值
   target[key] = value;
   // 通知所有訂閱者觸發(fā)更新
   trigger(target);
   // 嚴(yán)格模式下需要設(shè)置返回值，否則會報錯
   return value;
  }
 };
 // 返回代理監(jiān)聽對象
 observed = new Proxy(data, handler as any);
 rawToReactive.set(data, observed);
 reactiveToRaw.set(observed, data);

 return observed;
}

定義watcher 用來作為 compile 跟 reactive 的橋梁，跟 vue3 的實現(xiàn)可能不一樣

// 收集watcher依賴
const Dep: Dep = {
 deps: [],
 add(watcher: Watcher) {
  this.deps.push(watcher);
 }
};

// observer跟compile的橋梁，在編譯時添加watcher，在數(shù)據(jù)更新時觸發(fā)update更新視圖
function _watcher(node: any, attr: string, data: any, key: string): Watcher {
 return {
  node,
  attr,
  data,
  key,
  update() {
   // 逐層取值
   const mutationKeys = this.key.split('.');
   if (mutationKeys.length > 1) {
    let d: any = null;
    mutationKeys.forEach(key => (d = this.data[key] || (d && d[key])));
    this.node[this.attr] = d;
    return;
   }
   this.node[this.attr] = this.data[this.key];
  }
 };
}

接下來是編譯模板

這里只是模擬編譯，真正的編譯不是這樣的

獲取到模板上的 v-model 、 v-bind 屬性，獲取到綁定的屬性。當(dāng)數(shù)據(jù)發(fā)生變化時，更新視圖（這里會在trigger進行觸發(fā)），當(dāng)視圖改變數(shù)據(jù)時修改數(shù)據(jù)（為了簡單，通過eval函數(shù)實現(xiàn)），具體代碼如下

// 編譯模板
function _compile(nodes: any, $data: any) {
 [...nodes].forEach((e, index) => {
  const theNode = nodes[index];
  // 獲取到 input標(biāo)簽下的 v-model 屬性，并添加watcher
  if (theNode.tagName === 'INPUT' && theNode.hasAttribute('v-model')) {
   const key = theNode.getAttribute('v-model');
   Dep.add(_watcher(theNode, 'value', $data, key));
   // 監(jiān)聽input事件
   theNode.addEventListener('input', () => {
    const mutationKeys = key.split('.');
    if (mutationKeys.length > 1) {
     eval(`$data.${key}='${theNode.value}'`);
     return;
    }
    $data[key] = theNode.value;
   });
  }
  // 獲取 v-bind 屬性，并添加watcher
  if (theNode.hasAttribute('v-bind')) {
   const key = theNode.getAttribute('v-bind');
   Dep.add(_watcher(theNode, 'innerHTML', $data, key));
  }
 });
 trigger($data);
}

trigger 對依賴進行觸發(fā)

function trigger(target: any, key?: string | symbol) {
 Dep.deps.forEach((e: Watcher) => {
  e.update();
 });
}

使用效果

廢話不多說。直接上代碼！

假設(shè)我們有一個模板是這樣的，接下來我們在這個模板的 id="my-app" 元素內(nèi)實現(xiàn)雙向綁定

<div id="my-app">
 <h1 v-bind="a"></h1>
 <input v-model="a" type="text">
</div>

vue3 中 new Vue 已經(jīng)被 createApp 所代替，reactive 是反應(yīng)原理，可以抽出來單獨使用，vue3 外漏了所有內(nèi)部的 api，都可以在外部使用

const { createApp, reactive } = require('./vue.ts').default;
const App = {
 setup() {
  const react = reactive({
   a: {
    b: {
     c: {
      d: {
       e: 111
      }
     }
    }
   }
  });
  // 測試異步反應(yīng)
  setTimeout(() => {
   react.a.b.c.d.e = 222;
  }, 100);
  return react;
 }
};
createApp().mount(App, '#my-app');

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: