我是一名前端，先前用了很久的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（其實就是配置）部分。

實現思路如下：

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，大家可以自己試著玩一玩！