mpvue是一款使用Vue.js开发微信小程序的前端框架。使用此框架,开发者将获得完整的 Vue.js 开发体验,同时为H5和小程序提供了代码复用的能力。
我在前一段时间,学习了解并尝试开发了一个小程序“简说”,样式丑了点,代码有些粗糙,可是做为先后端分离的font-end项目开发学习,应该有些帮助,有兴趣能够去看看,git地址都在文中。mpvue及koa2全栈开发小程序前端
以上是mpVue的实现原理,vue
更具体点:webpack
mpvue 提供 mpvue 的common方法
mpvue-loader 提供 webpack 版本的加载器
mpvue-webpack-target webpack 构建目标git
mpvue/index.js
将滚动条拉到最后:github
return 一个 Vuew$3
,其实也是一个Vue构造函数,为了区分,叫作Vue$3web
以后整个文件都是在为了协调Vue和小程序作 Vue$3 构造函数的 封装
小程序
小程序实例的类型,可能的值是segmentfault
app.vue
在每一个vue实例挂载的时候,会初始化,将vue实例的属性同步到小程序对应的实例上。
其中一个属性mpType
,就是区别app
或 page
的属性。其实最初的时候,每一个vue实例的mpType
属性都是undefined,而脚手架生成的项目,会在咱们初始化vue应用的时候,将vue实例的mpType
赋值为app
,以下:后端
固然,这里的 import Vue from 'vue'
就是引用的 mpVue,为了得到更逼真的vue.js体验,做者使用webpack将其替换了。微信小程序
上面就是不一样的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钩子
触发数据更新
暂时就写这么多吧,能力有限,只能很僵硬的翻译大概的执行流程。但行好事,莫问前程.