(解析)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 的common方法
mpvue-loader 提供 webpack 版本的加載器
mpvue-webpack-target webpack 構建目標

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鉤子

觸發數據更新

小結

暫時就寫這麼多吧，能力有限，只能很僵硬的翻譯大概的執行流程。但行好事，莫問前程.