vue的使用相信大家都很熟練了，使用起來簡單。但是大部分人不知道其内部的原理是怎麼樣的，今天我們就來一起實作一個簡單的vue。
Object.defineProperty()實作之前我們得先看一下Object.defineProperty的實作，因為vue主要是通過資料劫持來實作的，通過get、set來完成資料的讀取和更新。
從上面可以看到通過get擷取資料，通過set監聽到資料變化執行相應操作，還是不明白的話可以去看看Object.defineProperty文檔。
流程圖
js調用
Vue結構
1、Vue constructor 構造函數主要是資料的初始化
2、proxyData 資料代理
3、observer 劫持監聽所有資料
4、compile 解析dom
5、compileText 解析dom裡處理純雙花括号的操作
6、Watcher 更新視圖操作
Vue constructor 初始化 上面主要是初始化操作，針對傳過來的資料進行處理
proxyData 代理data
上面主要是代理data到最上層，http://this.xxx的方式直接通路data
observer 劫持監聽
同樣是使用Object.defineProperty來監聽資料，初始化需要訂閱的資料。
把需要訂閱的資料到push到watcherTask裡，等到時候需要更新的時候就可以批量更新資料了。 下面就是；
周遊訂閱池，批量更新視圖。
compile 解析dom
class
這裡代碼比較多，我們拆分看你就會覺得很簡單了
首先我們先周遊el元素下面的所有子節點，node.nodeType === 3 的意思是目前元素是文本節點，node.nodeType === 1 的意思是目前元素是元素節點。因為可能有的是純文字的形式，如純雙花括号就是純文字的文本節點，然後通過判斷元素節點是否還存在子節點，如果有的話就遞歸調用compile方法。下面重頭戲來了，我們拆開看：
上面這個首先判斷node節點上是否有v-html這種指令，如果存在的話，我們就釋出訂閱，怎麼釋出訂閱呢？隻需要把目前需要訂閱的資料push到watcherTask裡面，然後到時候在設定值的時候就可以批量更新了，實作雙向資料綁定，也就是下面的操作
然後push的值是一個Watcher的執行個體，首先他new的時候會先執行一次，執行的操作就是去把純雙花括号 -> 1，也就是說把我們寫好的模闆資料更新到模闆視圖上。
最後把目前元素屬性剔除出去，我們用Vue的時候也是看不到這種指令的，不剔除也
不影響
至于Watcher是什麼，看下面就知道了
Watcher 之前釋出訂閱之後走了這裡面的操作，意思就是把目前元素如：node.innerHTML = '這是data裡面的值'、node.value = '這個是表單的資料'
那麼我們為什麼不直接去更新呢，還需要update做什麼，不是多此一舉嗎？
其實update記得嗎？我們在訂閱池裡面需要批量更新，就是通過調用Watcher原型上的update方法。
效果大家可以浏覽器看一下效果，由于本人太懶了，gif效果圖就先不放了，哈哈
完整代碼位址：https://github.com/wclimb/MyVue
參考1、剖析Vue原理&實作雙向綁定MVVM
2、仿Vue實作極簡雙向綁定
微信公衆号：我的web前端自救之路
回複 加群 ，跟大佬們一起交流技術吧