純JS如何實現vue.js下的雙向繫結功能
目錄
看下面截圖
這是一個普通的html檔案，也並沒有引入程式設計客棧vue.js，是不是在程式碼中看到有些熟悉的地方？比如："v-mhttp://www.cppcns.comodel","v-on:click"，還有常用的“雙花括號{{}}”賦值語句。
首先說一下實現雙向繫結的思路：
一、建立一個自定義vue js物件，例如上面的wslVue 物件，初始化方法裡面需要的引數有：（1）需要掛載到的dom物件id、（2）自定義vue物件的data屬性（json物件）、（3）後面添加了一個模擬掛載的方法。（這裡有用的就是（1）、（2）引數，（3）引數可以當認為vue物件所有的初始化工作完成後可以進行渲染（掛載）了方法回撥）。
二、重寫vue屬性data json物件的set、get方法，同時可以為vue物件新增data下的所有屬性，重寫vue生成屬性的set、get方法，方法裡直接執行data的set、get方法（目的是可以直接用vue物件屬性的讀寫進行dom操作）。
三、解析html，將html裡面的標籤node、文字node進行特定重組（這裡說的特定重組指的就是將vue指令，{{}} 賦值符號轉換為正常的html文件進行輸出），在解析過程中對每一個需要操xSmNdkf作的node進行快取、繫結邏輯、新增監聽事件（比如：input標籤輸入）。
再說一下實現這些功能的js主要的方法有哪些：
一、js物件屬性的set、get方法。
二、document.createDocumentFragment html片段解析。
三、相關的正則判斷進行html程式碼片段重組。
最後需要建立哪些工具類？
一、vue物件。
二、觀察者類Watcher，儲存需要操作的node節點和屬性變更需要做的回撥方法。
三、管理所有觀察者Watcher的管理類Dep，控制資料變更相關Watcher進行回撥渲染。
實現vue雙向繫結
初始化vue物件方法
註釋：
1：為vue物件新增data裡全部的屬性，並重寫set、get方法。
2：為vue物件新增方法管理methods物件，當解析html獲取到v-on:click方法的時候為標籤新增click事件方法體。
3：這裡進行解析html，解析時遇到需要處理的node時建立Watch程式設計客棧er物件，將相關node及指令儲存在Watcher物件裡，並把Watcher物件新增到觀察者管理類Dep集合裡面。
4：初始化完成後進行掛載，渲染完整的html到指定的dom元素上。
Compile類解析需要掛載對應的dom
獲取全部的node節點
解析特定指令
標籤元素與文字內容判斷
這裡如果是標籤node需要解析裡面的v-on和v-model指令
v-model
v-on:click
紅線處即為vue物件裡methods匹配出來的方法，為當前的node新增點選事件。
這裡如果是文字內容node需要解析裡面的{{}}指令。
總結：這裡會建立很多Watcher物件，物件儲存了當前vue物件、node、資料變更回撥，並儲存在Dep管理類裡，以待資料變更時直接執行方法回撥進行渲染。
特定指令判斷
Watcher及Dep物件
最後放一張思維導圖
結尾：到這裡基本的思路就講完了，沒有太複雜的邏輯，表達能力有限。希望對大家能有幫助，同時也接受大神們的批評指正，共同進步。
以上就是純JS如何實現vue.js下的雙向繫結功能的詳細內容，更多關於JS實現vue的雙向繫結的資料請關注我們其它相關文章！