您好,登錄后才能下訂單哦!
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 進(jìn)行取值時會觸發(fā) }, set() { // 當(dāng)對 observed.a 進(jìn)行賦值時會觸發(fā) }, // 還有一些額外的參數(shù)如 has 等,這里用不到,就不多說了 .... } const observed = new Proxy(target, handers)
這樣我們就可以對 target 對象設(shè)置了一層代理,當(dāng)我們對 target 進(jìn)行取賦值操作的時候就可以接可以截獲到它的行為了,但是如果你以為就只有這么簡單你就錯了。
我們把 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)部的所有屬性進(jìn)行深層監(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進(jìn)行觸發(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 對依賴進(jìn)行觸發(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"> <h2 v-bind="a"></h2> <input v-model="a" type="text"> </div>
vue3 中 new Vue 已經(jīng)被 createApp 所代替,reactive 是反應(yīng)原理,可以抽出來單獨(dú)使用,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í)有所幫助,也希望大家多多支持億速云。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。