JavaScript如何實現(xiàn)一個簡單的Vue？

我是一名前端，先前用了很久的react，最近用了三個月的vue，我來回答一下這個問題！

目前很多的公司都在使用vue來開發(fā)和維護(hù)自己的站點，我認(rèn)為vue這么流行，主要有以下幾點原因：

1、 性能好（dom的基本操作都有框架完成，引入虛擬dom后性能更加卓越）

2、 易學(xué)（能力強的前端2天即可上手干活）

用過vue的同學(xué)肯定知道一個vue文件主要包括兩個部分（不算css）：

1、 vue的模板

2、 vue的生命周期邏輯

如果自己要手寫一個vuejs，其實就是如何把vue生命周期中的js邏輯對應(yīng)到模板中，并且實現(xiàn)雙向綁定，能夠?qū)崟r的把數(shù)據(jù)展現(xiàn)在模板中，下面我們嘗試著簡單的實現(xiàn)一把！

看上面的圖片，root節(jié)點相當(dāng)于vue的模板，js部分相當(dāng)于vue的data和method（其實就是配置）部分。

實現(xiàn)功能：div的寬度是100px，每點擊一次加10px，寬度的數(shù)值還可以實時反映到p標(biāo)簽中。

實現(xiàn)思路如下：

1、 首先我們將兩個配置收集到vModel中，w就是div的初始化寬度，change函數(shù)很明顯就是點擊的回調(diào)函數(shù)

2、 遞歸root節(jié)點，在div上我們發(fā)現(xiàn)兩個屬性v-css-width 和 v-click , 這樣的屬性由我們自己定義，當(dāng)然要有含義！ 第一個屬性的意思就是為此標(biāo)簽設(shè)置width，第二個屬性的意思就是綁定點擊事件，p標(biāo)簽就是將自己的內(nèi)容替換成w的值。屬性可以由正則去匹配對應(yīng)的key 和 value。匹配完成后，將數(shù)據(jù)傳入到具體的處理邏輯中執(zhí)行。

3、 做完上面兩步，模板的初始化就已經(jīng)完成了，下面我們還需要做雙向綁定！此處需要雙向綁定的是w！ 我們可以遍歷vModel，通過Object.defineProperties為需要的屬性綁定get/set方法，當(dāng)我們重新給w賦值時，就會執(zhí)行cb函數(shù)，可以在cb中再次調(diào)用handle函數(shù)和其他的處理邏輯。

綜上，通過這三步基本可以實現(xiàn)一個微型的vue，大家可以自己試著玩一玩！

喜歡我的回答就關(guān)注我吧，有問題可以發(fā)表評論，我們一起學(xué)習(xí)，共同成長！