純JS如何實(shí)現vue.js下的雙向綁定功能

目錄

看下面截圖

這是一個(gè)普通的html文件，也并沒(méi)有引入vue.js，是不是在代碼中看到有些熟悉的地方？比如："v-model","v-on:click"，還有常用的“雙花括號{{}}”賦值語(yǔ)句。

首先說(shuō)一下實(shí)現雙向綁定的思路：

一、創(chuàng )建一個(gè)自定義vue js對象，例如上面的wslVue 對象，初始化方法里面需要的參數有：（1）需要掛載到的dom對象id、（2）自定義vue對象的data屬性（json對象）、（3）后面添加了一個(gè)模擬掛載的方法。（這里有用的就是（1）、（2）參數，（3）參數可以當認為vue對象所有的初始化工作完成后可以進(jìn)行渲染（掛載）了方法回調）。

二、重寫(xiě)vue屬性data json對象的set、get方法，同時(shí)可以為vue對象添加data下的所有屬性，重寫(xiě)vue生成屬性的set、get方法，方法里直接執行data的set、get方法（目的是可以直接用vue對象屬性的讀寫(xiě)進(jìn)行dom操作）。

三、解析html，將html里面的標簽node、文本node進(jìn)行特定重組（這里說(shuō)的特定重組指的就是將vue指令，{{}} 賦值符號轉換為正常的html文檔進(jìn)行輸出），在解析過(guò)程中對每一個(gè)需要操作的node進(jìn)行緩存、綁定邏輯、添加監聽(tīng)事件（比如：input標簽輸入）。

再說(shuō)一下實(shí)現這些功能的js主要的方法有哪些：

一、js對象屬性的set、get方法。

二、document.createDocumentFragment html片段解析。

三、相關(guān)的正則判斷進(jìn)行html代碼片段重組。

最后需要創(chuàng )建哪些工具類(lèi)？

一、vue對象。

二、觀(guān)察者類(lèi)Watcher，保存需要操作的node節點(diǎn)和屬性變更需要做的回調方法。

三、管理所有觀(guān)察者Watcher的管理類(lèi)Dep，控制數據變更相關(guān)Watcher進(jìn)行回調渲染。

實(shí)現vue雙向綁定

初始化vue對象方法

注釋?zhuān)?/p>

1：為vue對象添加data里全部的屬性，并重寫(xiě)set、get方法。

2：為vue對象添加方法管理methods對象，當解析html獲取到v-on:click方法的時(shí)候為標簽添加click事件方法體。

3：這里進(jìn)行解析html，解析時(shí)遇到需要處理的node時(shí)創(chuàng )建Watcher對象，將相關(guān)node及指令保存在Watcher對象里，并把Watcher對象添加到觀(guān)察者管理類(lèi)Dep集合里面。

4：初始化完成后進(jìn)行掛載，渲染完整的html到指定的dom元素上。

Compile類(lèi)解析需要掛載對應的dom

獲取全部的node節點(diǎn)

解析特定指令

標簽元素與文本內容判斷

這里如果是標簽node需要解析里面的v-on和v-model指令

v-model

v-on:click

紅線(xiàn)處即為vue對象里methods匹配出來(lái)的方法，為當前的node添加點(diǎn)擊事件。

這里如果是文本內容node需要解析里面的{{}}指令。

總結：這里會(huì )創(chuàng )建很多Watcher對象，對象保存了當前vue對象、node、數據變更回調，并保存在Dep管理類(lèi)里，以待數據變更時(shí)直接執行方法回調進(jìn)行渲染。

特定指令判斷

Watcher及Dep對象

最后放一張思維導圖

結尾：到這里基本的思路就講完了，沒(méi)有太復雜的邏輯，表達能力有限。希望對大家能有幫助，同時(shí)也接受大神們的批評指正，共同進(jìn)步。

以上就是純JS如何實(shí)現vue.js下的雙向綁定功能的詳細內容，更多關(guān)于JS實(shí)現vue的雙向綁定的資料請關(guān)注腳本之家其它相關(guān)文章！