(解析)mpvue源码解读

前言

mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将获得完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。
我在前一段时间,学习了解并尝试开发了一个小程序“简说”,样式丑了点,代码有些粗糙,可是做为先后端分离的font-end项目开发学习,应该有些帮助,有兴趣能够去看看,git地址都在文中。mpvue及koa2全栈开发小程序前端

解读

mpvue实现原理

clipboard.png

以上是mpVue的实现原理,vue

  • 小程序负责视图层展现
  • 全部业务逻辑收敛到 Vue.js 中
  • Vue.js 数据变动后同步到小程序

更具体点:webpack

  • Vue.js 实例与小程序 Page 实例创建关联
  • 小程序和 Vue.js 生命周期创建映射关系,能在小程序生命周期中触发 Vue.js 生命周期
  • 小程序事件创建代理机制,在事件代理函数中触发与之对应的 Vue.js 组件事件响应
  • vue与小程序的数据同步

mpvue实现配套设施

mpvue 提供 mpvue 的common方法
mpvue-loader 提供 webpack 版本的加载器
mpvue-webpack-target webpack 构建目标git

mpvue 源码

mpvue/index.js
将滚动条拉到最后:github

clipboard.png

return 一个 Vuew$3,其实也是一个Vue构造函数,为了区分,叫作Vue$3web

clipboard.png
以后整个文件都是在为了协调Vue和小程序作 Vue$3 构造函数的 封装小程序

Vue.js 实例与小程序 Page 实例创建关联 及生命周期的绑定

小程序实例的类型,可能的值是segmentfault

  • 'app': 对应 咱们vue应用的最外层,也就是路由的挂载根节点 app.vue
  • 'page': 除了 app.vue,其余的vue实例
  • 'component': 其余的vue组件

clipboard.png

在每一个vue实例挂载的时候,会初始化,将vue实例的属性同步到小程序对应的实例上。
其中一个属性mpType,就是区别apppage 的属性。其实最初的时候,每一个vue实例的mpType属性都是undefined,而脚手架生成的项目,会在咱们初始化vue应用的时候,将vue实例的mpType赋值为app,以下:后端

clipboard.png

固然,这里的
import Vue from 'vue' 就是引用的 mpVue,为了得到更逼真的vue.js体验,做者使用webpack将其替换了。微信小程序

clipboard.png

clipboard.png

clipboard.png

clipboard.png

上面就是不一样的vue实例类型与小程序的实例上 生命周期的绑定

vue与小程序的数据同步

拉到index.js最下面能够看到

clipboard.png

这是用来同步数据的方法

clipboard.png

初始化页面数据

图片描述

这里作了节流 为了优化大量数据更新

与vue同样,mpvue也须要跟踪数据变化,利用watcher,利用发布订阅

clipboard.png

这是初始化state

clipboard.png

这里将数据送到观察者

clipboard.png

clipboard.png

遍历初始化的state,所有加入到观察者的队列

clipboard.png

clipboard.png

这里就是数据劫持了,get set
在get中还要引入 watcher的概念,用来监听每一个属性值
在刚刚挂载组件的时候,同时为该组件的vm - view-model 建立了一个watcher

clipboard.png

也调用了这个Watcher的get原型方法,最重要的一点是,执行了pushTarget方法,将Watcher赋值给target属性

clipboard.png

从而在get方法中,有了target,将这个watcher加入到 dep的sub子集中

clipboard.png

clipboard.png

在set方法拦截到数据改变时,通知watcher

clipboard.png

wathcer调用update

clipboard.png

继续调用queueWatcher

clipboard.png

调用flushSchedulerQueue

clipboard.png

通知update钩子

clipboard.png

触发数据更新

clipboard.png

clipboard.png

clipboard.png

小结

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