脚本宝典收集整理的这篇文章主要介绍了

(解析)mpvue源码解读

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。

前言

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

解读

mpvue实现原理

clipboard.png

以上是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
将滚动条拉到最后:

clipboard.png

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

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

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

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

  • '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

小结

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

总结

以上是脚本宝典为你收集整理的

(解析)mpvue源码解读

全部内容,希望文章能够帮你解决

(解析)mpvue源码解读

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过