文档章节

mpvue原理分析

o
 osc_wws45aot
发布于 2019/08/20 17:01
字数 1534
阅读 8
收藏 0

精选30+云产品,助力企业轻松上云!>>>

为什么要做小程序框架?

  1. 组件机制
  2. 多端复用
 
小程序实现原理
 
数据驱动视图更新;视图交互触发事件,事件响应函数修改数据再次触发视图更新
 
 
mpvue原理
 
jsBridge
vue.js和小程序的工作原理一致,可以把小程序的功能托管给vue.js,在正确的时机将数据变更同步到小程序,从而达到开发小程序的目的。这样,我们可以将精力聚焦在 Vue.js 上,参照 Vue.js 编写与之对应的小程序代码,小程序负责视图层展示,所有业务逻辑收敛到 Vue.js 中,Vue.js 数据变更后同步到小程序,如图2所示。如此一来,我们就获得了以 Vue.js 的方式开发小程序的能力
 
 
生命周期关联:
vue和小程序的数据彼此隔离,各有不同的更新机制。mpvue从生命周期和事件回调函数切入,在vue触发数据更新时实现数据同步。小程序通过视图层呈现给用户、通过事件响应用户交互,vue在后台维护这数据的变更和逻辑。为了实现数据的同步,mpvue修改了vue的runtime实现,在vue的生命周期中增加了更新小程序数据的逻辑。
 
事件代理机制:
用户交互触发的数据更新通过事件的代理机制完成。vue中,事件响应函数对应组件的method,vue自动维护了上下文环境。然而在小程序中没有这种机制,vue执行环境中维护了一份实时虚拟DOM,这与小程序视图层完全对应,小程序组件上触发事件后,只要找到虚拟DOM上对应的节点,触发对应的事件就可以了;另一方面,vue事件响应如果触发了数据更新,其生命周期函数更新将自动触发,在此函数上同步更新数据。
 
 
事件代理机制源码分析
 
对比小程序事件系统,mpvue事件系统和Dom事件系统
// 小程序 event 对象属性(8 个)
 
["type", "timeStamp", "target", "currentTarget", "detail", "touches", "changedTouches", "_requireActive"]
 
// DOM event 对象属性 / 方法(54 个)
 
["isTrusted", "screenX", "screenY", "clientX", "clientY", "ctrlKey", "shiftKey", "altKey", "metaKey", "button", "buttons", "relatedTarget", "pageX", "pageY", "x", "y", "offsetX", "offsetY", ..., "cancelable", "timeStamp", "srcElement", "returnValue", "cancelBubble", "path", "composedPath", "stopPropagation", "stopImmediatePropagation", "preventDefault", "initEvent"]
// mpvue event 对象属性 / 方法(9 个)
 
["mp", "type", "timeStamp", "x", "y", "target", "currentTarget", "stopPropagation", "preventDefault"]
  1. 在mpvue生成的wxml中,所有事件都被hanleProxy的函数接管,在handleProxy进行处理后再去调用我们写的真正的事件处理函数。这个方法在initMp时,作为小程序page的构造函数的一个选项,从而可以在wxml中被正确调用

  1. handleProxy将小程序的event对象传给handleProxyWithVue函数进行进一步处理
  2. handleProxyWithVue的作用

    (1) 从跟实例开始,根据comkey找出事件处理函数所在的mpvue示例(getVm)

    (2) 通过遍历找到的vm的vnode,结合eventid找到小程序事件对应的真是的事件处理函数(getHandle)

    (3) 将小程序的event对象包装成mpvue的event对象(getWebEventByMP),并添加了preventDafault和stopPropagation方法,但是preventDafault和stopPropagation方法是两个空函数(noop),所以组织冒泡还是得使用.stop修饰符通过compile编译成catchEvent

  1. 将包装后的event对象(getWebEventByMP), 传给真实的处理函数进行调用
 
(生成的wxml中绑定事件的节点都有data-comkeydata-eventid属性,在一个事件触发时,它们是被用来寻找事件对应的vm实例和对应的事件处理函数的)
 
 
 
 
原有的mpvue更新机制:
mpvue实现原理是基于Vue2.js,重写platform部分代码来实现在小程序环境下用Vue组件系统进行运行。在Vue的H5实现中,当我们组件树上的一个组件属性更改后,会触发整个树的检查更新,然后在新老dom树对比算出最小改动后,同步到浏览器的真实dom,这个过程熟悉Vue的开发者很熟悉了,就是diff更新。
但是H5版的diff最后的浏览器runtime代码是基于增删dom节点API进行的,小程序又不提供增删节点的功能,所以为了能在小程序环境实现更新,原版mpvue对整个触发更新检查的V-dom树都取值转换成了小程序对应的JSON,通过setData()接口同步到视图。这个过程在实际运行会造成setData的数据冗余过大。通过代理updateDataToMP打日志的方式我们发现,v-dom树上任意节点的任意属性更改,会引发整棵树的更新,一次形如this.a = 1的操作会引起O(N^2)量级的更新。真实在项目中监控到,一个10个组件左右构成的页面,每次进行一次this.a=1数据更新,在$nextTick渲染时真实传到小程序的数据大概在10k-20k。安卓真机上会造成大概200-300ms的渲染演示,肉眼能较明显觉察。
 
新mpvue数据更新机制:
新版Mpvue在每次数据更新的时候,会在Vue监听set方法,每次触发属性更新的时候把当前更新的属性key放在当前V-dom的__keyPath属性中。一次更新全部触发后,在实际render过程中遍历keyPath属性,只选择更新的属性放到json里,调用Page.setData来进行更新操作。同时在Vue.$nextTick函数里,触发完所有的render更新后会清理掉全部keyPath,防止下次再更新又冗余。通过这种操作,this.a=1可以O(N^2)量级降低到O(1).上面例子中每次更新10k-20k的页面,在业务中有比如用户操作引起某个组件数字+1,关闭弹窗等操作时,更新量降低到几个字节。安卓卡顿的问题也从框架角度完美解决
o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
mpvue踩坑记录

最近公司开始做小程序项目,因为之前比较熟悉vue,不太想为小程序专门再去学习他那套语法了,所以找了美团团队开源的mpvue作为解决方案 mpvue具体情况可以看github上面的官方文档:mpvue文档...

小pxu
2018/05/13
0
0
Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题。坑来坑去,先上示例代码吧,由简单到复杂顺序。 main.js代码 main.json代码 index.vue代码 运行效果 坑s 归纳起来...

googlingman
2019/02/21
0
0
Vant Weapp小程序蹲坑之使用submit-bar组件

本文介绍在Vant Weapp小程序开发中使用submit-bar组件时需要注意的部分问题。坑来坑去,先上示例代码吧,由简单到复杂顺序。 main.js代码 main.json代码 index.vue代码 运行效果 未完,待稍后...

googlingman
2019/02/13
0
0
小程序开发框架技术分析选型

1. 前言 从16年微信小程序内测的时候到如今,微信小程序用时间与实践证明了自己的变革与价值,微信小程序的规则也在开发社区的影响下变得更加完善。 对于第三方企业来讲,微信为自己带来了巨...

极客教程
2018/07/24
0
0
mpvue采坑记(同一个页面或者组件反复进入动态数据被覆盖)

该问题出现的issue:https://github.com/Meituan-Dianping/mpvue/issues/140 使用场景: 在使用mpvue开发小程序中,出现同路由复用,使用不同页面的情况。 例如: 进入:首页->商品详情页1(i...

osc_u94h44ck
2019/06/06
6
0

没有更多内容

加载失败,请刷新页面

加载更多

Hacker News 简讯 2020-07-10

更新时间: 2020-07-10 01:15 US Supreme Court deems half of Oklahoma a Native American Reservation - (reuters.com) 美国最高法院认为俄克拉荷马州的一半是印第安人保留地 得分:131 | 评...

FalconChen
今天
26
0
OSChina 周五乱弹 —— 求求你吃了我吧,不要再玩弄食物的感情了

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @巴拉迪维 :张喆的单曲《陷阱 》 这首歌已经在网易找不到原唱了,不知道被哪家买了版权。#今日歌曲推荐# 《陷阱 》- 张喆 手机党少年们想听歌...

小小编辑
今天
26
1
清华陈文光教授:AI 超算基准测试的最新探索和实践。

道翰天琼认知智能平台为您揭秘新一代人工智能。 无规矩不成方圆。放在超级计算机的研发领域,没有一个大家普遍接受的算力评测指标,便难以推动超算迅猛发展。 而现在伴随着人工智能的发展,大...

jackli2020
今天
7
0
@RequestMapping, consumes 提交简单有意思的测试

getParm @GetMapping("getParm")public Result getParm(String id){ System.out.println(); return ResultFactory.success(id);} 等同于 == bodyParm @PostMapping("bodyParm......

莫库什勒
今天
25
0
63. Unique Paths II

题目: 63. Unique Paths II A robot is located at the top-left corner of a m x n grid (marked 'Start' in the diagram below). The robot can only move either down or right at any p......

JiaMing
今天
55
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部