(解析)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钩子

触发数据更新

小结

暂时就写这么多吧，能力有限，只能很僵硬的翻译大概的执行流程。
但行好事，莫问前程.