(詳解)mpvue原始碼解讀
前言
mpvue是一款使用Vue.js開發微信小程式的前端框架。使用此框架，開發者將得到完整的 Vue.js 開發體驗，同時為H5和小程式提供了程式碼複用的能力。 我在前一段時間，學習瞭解並嘗試開發了一個小程式“簡說”，樣式醜了點，程式碼有些粗糙，但是作為前後端分離的font-end專案開發學習，應該有些幫助，有興趣可以去看看，git地址都在文中。mpvue及koa2全棧開發小程式
解讀
mpvue實現原理
以上是mpVue的實現原理，
- 小程式負責檢視層展示
- 所有業務邏輯收斂到 Vue.js 中
- Vue.js 資料變更後同步到小程式
更具體點:
- Vue.js 例項與小程式 Page 例項建立關聯
- 小程式和 Vue.js 生命週期建立對映關係，能在小程式生命週期中觸發 Vue.js 生命週期
- 小程式事件建立代理機制，在事件代理函式中觸發與之對應的 Vue.js 元件事件響應
- vue與小程式的資料同步
mpvue實現配套設施
mpvue 原始碼
mpvue/index.js將滾動條拉到最後：
return 一個 Vuew$3，其實也是一個Vue建構函式，為了區分，叫做Vue$3
之後整個檔案都是在為了協調Vue和小程式做 Vue$3 建構函式的 封裝
Vue.js 例項與小程式 Page 例項建立關聯 及生命週期的繫結
小程式例項的型別，可能的值是
- 'app': 對應 我們vue應用的最外層，也就是路由的掛載根節點
app.vue - 'page': 除了 app.vue,其他的vue例項
- 'component': 其他的vue元件
在每個vue例項掛載的時候，會初始化，將vue例項的屬性同步到小程式對應的例項上。其中一個屬性mpType，就是區別app 或 page 的屬性。其實最初的時候，每個vue例項的mpType屬性都是undefined，而腳手架生成的專案，會在我們初始化vue應用的時候，將vue例項的mpType賦值為app，如下:
當然，這裡的 import Vue from 'vue' 就是引用的 mpVue，為了獲得更逼真的vue.js體驗，作者使用webpack將其替換了。
上面就是不同的vue例項型別與小程式的例項上 生命週期的繫結
vue與小程式的資料同步
拉到index.js最下面可以看到
這是用來同步資料的方法
與vue一樣，mpvue也需要跟蹤資料變化，利用watcher，利用釋出訂閱
這是初始化state
這裡將資料送到觀察者
遍歷初始化的state，全部加入到觀察者的佇列
這裡就是資料劫持了，get set在get中還要引入 watcher的概念，用來監聽每個屬性值在剛剛掛載元件的時候，同時為該元件的vm - view-model 建立了一個watcher
也呼叫了這個Watcher的get原型方法，最重要的一點是，執行了pushTarget方法，將Watcher賦值給target屬性
從而在get方法中，有了target，將這個watcher加入到 dep的sub子集中
在set方法攔截到資料改變時，通知watcher
wathcer呼叫update
繼續呼叫queueWatcher
呼叫flushSchedulerQueue
通知update鉤子
觸發資料更新
小結
暫時就寫這麼多吧，能力有限，只能很僵硬的翻譯大概的執行流程。但行好事，莫問前程.