前言
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钩子
触发数据更新
小结
暂时就写这么多吧,能力有限,只能很僵硬的翻译大概的执行流程。
但行好事,莫问前程.
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。