(解析)mpvue源码解读

前言

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

解读

mpvue实现原理

《(解析)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
将滚动条拉到最后:

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》
之后整个文件都是在为了协调Vue和小程序做 Vue$3 构造函数的 封装

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

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

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

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

当然,这里的
import Vue from 'vue' 就是引用的 mpVue,为了获得更逼真的vue.js体验,作者使用webpack将其替换了。

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

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

vue与小程序的数据同步

拉到index.js最下面可以看到

《(解析)mpvue源码解读》

这是用来同步数据的方法

《(解析)mpvue源码解读》

初始化页面数据

《(解析)mpvue源码解读》

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

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

《(解析)mpvue源码解读》

这是初始化state

《(解析)mpvue源码解读》

这里将数据送到观察者

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

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

《(解析)mpvue源码解读》

wathcer调用update

《(解析)mpvue源码解读》

继续调用queueWatcher

《(解析)mpvue源码解读》

调用flushSchedulerQueue

《(解析)mpvue源码解读》

通知update钩子

《(解析)mpvue源码解读》

触发数据更新

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

《(解析)mpvue源码解读》

小结

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

    原文作者:winward
    原文地址: https://segmentfault.com/a/1190000016389413
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞