我是一名前端，先前用了很久的react，最近用了三個月的vue，我來回答一下這個問題！
目前很多的公司都在使用vue來開發和維護自己的站點，我認為vue這么流行，主要有以下幾點原因：
1、性能好（dom的基本操作都有框架完成，引入虛擬dom后性能更加卓越）
2、易學（能力強的前端2天即可上手干活）
用過vue的同學肯定知道一個vue文件主要包括兩個部分（不算css）：
1、vue的模板
2、vue的生命周期邏輯
如果自己要手寫一個vuejs，其實就是如何把vue生命周期中的js邏輯對應到模板中，并且實現雙向綁定，能夠實時的把數據展現在模板中，下面我們嘗試著簡單的實現一把！
看上面的圖片，root節點相當于vue的模板，js部分相當于vue的data和method（其實就是配置）部分。
實現功能：div的寬度是100px，每點擊一次加10px，寬度的數值還可以實時反映到p標簽中。
實現思路如下：
1、首先我們將兩個配置收集到vModel中，w就是div的初始化寬度，change函數很明顯就是點擊的回調函數
2、遞歸root節點，在div上我們發現兩個屬性v-css-width和v-click,這樣的屬性由我們自己定義，當然要有含義！第一個屬性的意思就是為此標簽設置width，第二個屬性的意思就是綁定點擊事件，p標簽就是將自己的內容替換成w的值。屬性可以由正則去匹配對應的key和value。匹配完成后，將數據傳入到具體的處理邏輯中執行。
3、做完上面兩步，模板的初始化就已經完成了，下面我們還需要做雙向綁定！此處需要雙向綁定的是w！我們可以遍歷vModel，通過Object.defineProperties為需要的屬性綁定get/set方法，當我們重新給w賦值時，就會執行cb函數，可以在cb中再次調用handle函數和其他的處理邏輯。
綜上，通過這三步基本可以實現一個微型的vue，大家可以自己試著玩一玩！