DCloud_UNI_CHB
DCloud_UNI_CHB
  • 发布:2019-03-15 17:45
  • 更新:2019-07-27 23:53
  • 阅读:15729

uni-app 1.8发布,微信端性能翻倍,并增加若干 Vue 语法支持

分类:uni-app

背景

uni-app在初期借鉴了mpvue,实现了微信小程序端的快速兼容,感谢美团点评团队对于开源社区的贡献!

但不少开发者抱怨mpvue支持的vue语法少,某些场景性能有问题。

为了让uni-app的开发者更满意,uni-app团队经过数月研发,全新重写框架,大幅提升了微信端运行性能、支持了更多vue语法

新版特性1:性能翻倍

基于mpvue的老框架和新框架是两种编译模式,主要区别在于组件化开发的实现机制不同;

  • mpvue将用户编写的Vue组件,编译为WXML中的模板(template),变相实现组件化开发;我们称这种编译模式为template模板模式
  • uni-app新框架则将用户编写的Vue组件,编译为微信小程序自定义组件,实现了更高的性能;我们称这种编译模式为自定义组件模式

基于自定义组件的新框架完成后,我们构造了如下测试模型:

  • 构造一个列表界面,每个列表项为一个自定义组件
  • 上拉加载触发数据更新,每次从本地读取静态数据,屏蔽网络差异

然后分别使用template模板模式自定义组件模式,在同一台手机(vivo nex)上进行多次测试,然后求其平均值,获取如下结果:

组件数量 老框架(mpvue) 新框架
200 204ms 129ms
400 280ms 139ms
800 341ms 180ms
1000 653ms 196ms

上表时间毫秒是指,从给变量赋值,到界面更新渲染完毕之间的耗时。

从测试数据来看,自定义组件模式(新框架)在复杂页面下,性能有翻倍提升!特别是数据越多、组件越复杂的页面,性能提升越大!

新版特性2:更多Vue语法支持

新版支持了更多 Vue 语法,详细如下:

  • 支持过滤器 filter
  • 支持比较复杂的 JavaScript 渲染表达式
  • 支持在 template 内使用 methods 中的函数
  • 支持 v-html (同 rich-text 的解析)
  • 支持 v-slot 新语法
  • 支持解构插槽 Prop 设置默认值
  • 支持 slot 后备内容
  • 组件支持原生事件绑定,如:@tap.native

新版不支持的 vue 语法

  • class不支持绑定Obejct变量(使用字符串的形式绑定)
  • 不支持事件修饰符:prevent、passive(在App与小程序平台,使用stop修饰符,既可以阻止冒泡也能阻止默认行为)
  • 不支持render、inline-template、X-Templates、keep-alive、transition
  • 不支持使用 Vue.use 的方式注册全局组件(在main.js使用Vue.component的方式引入)

新旧版本兼容策略

为兼容历史项目,uni-app 现阶段同时支持老的template模板模式、和新的自定义组件模式两种模式,默认策略如下:

  • HBuilderX 1.8.0+ 新创建的项目,在微信端默认会启用新的框架;
  • 历史项目默认使用老框架。如需启动新框架请按下面配置开启。
  • 但注意1.7.3群测版默认使用了新框架,升级到1.8后,也需要手动配置开启新框架

开发者可在manifest.json的源码视图里配置, manifest.json -> mp-weixin -> usingComponents切换编译模式,如下:

// manifest.json  
{  
    // ...  
    /* 小程序特有相关 */  
    "mp-weixin": {  
        "usingComponents":true //是否启用`自定义组件模式`,为true表示新的`自定义组件模式`,否则启用老的`template模板模式`  
    }  
}  

Tips:

  • 为保证自定义组件兼容性,运行到微信开发者工具时,建议将微信基础库设置为最新版本。
  • 如果你使用了新增的vue语法,请注意只有h5和微信支持这些新语法,编译到其他平台时,要用条件编译处理。

新版开发注意事项

新框架基于微信小程序自定义组件实现,在进行自定义组件开发(页面开发不影响)时,需注意部分约束,详见:https://ask.dcloud.net.cn/article/35851

性能优化建议

  1. 模板中不建议直接使用 object
<!-- 低性能写法 -->  
<uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="{color: '#4cd964',size: '22',type: 'spinner'}"></uni-title>  
<!-- 高性能写法 -->  
<template>  
    <view>  
        <uni-title title="标题文字" note="描述信息" show-extra-icon="true" :extra-icon="extraIcon"></uni-title>  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            extraIcon:{color: '#4cd964',size: '22',type: 'spinner'}  
        }  
    }  
}  
</script>  
  1. 在模板中未使用的数据不建议定义在data 中,未使用的数据一律移除到 vm 外边定义
<!-- 低性能写法 -->  
<template>  
    <view>  
        {{name}}  
    </view>  
</template>  
<script>  
export default {  
    data() {  
        return {  
            name:'',  
            types:true  
        }  
    },  
    onLoad(){  
        if(this.types){  
            this.name = '张三';  
        } else {  
            this.name = '李四';  
        }  
    }  
}  
</script>
<!-- 高性能写法 -->  
<template>  
    <view>  
        {{name}}  
    </view>  
</template>  
<script>  
let types = true ;  
export default {  
    data() {  
        return {  
            name:''  
        }  
    },  
    onLoad(){  
        if(types){  
            this.name = '张三';  
        } else {  
            this.name = '李四';  
        }  
    }  
}  
</script>
  1. 为提升开发体验,新版本增加了部分 Vue 语法,其实这些语法在微信小程序中本身是不支持的;为支持这些语法,uni-app 会在编译、运行时分别做一些额外的工作,若开发者希望追求性能极致,则建议尽量少用或者不用新增语法。

后续

新框架会陆续把新编译器迁移到其他小程序端上。

升级注意

如果你的项目是cli创建的,记得编译器在你的项目下,不会随着HBuilderX升级而升级,你需要npm update手动升级编译器。

27 关注 分享
Trust 281768790@qq.com DCloud_heavensoft 375890534@qq.com DCloud_HB_WDL 萌龙 wenju 377313813@qq.com 1220298224@qq.com 诗小柒 75754567@qq.com ShiningStone 479686314@qq.com DCloud_UNI_HDX AJXMJC 306816224@qq.com 剑心无间 日进斗金 凯哥 913360226@qq.com lobtao sharper DCloud_UNI_HT 1750352431@qq.com 井 251309370@qq.com 李新红

要回复文章请先登录注册

cookie_session@163.com

cookie_session@163.com

安卓WSS协议 OnMessage不触发 可以发消息到服务器 这个致命的bug。。。。。迟迟未解决
2019-07-27 23:53
半晴雨滴

半晴雨滴

filter不能用,不管是局部注册还是全局注册
2019-07-10 10:42
1951844956@qq.com

1951844956@qq.com

回复 DCloud_UNI_CHB:
额,,我今天用了官方的登陆模板发现可以,然后又去改了我的代码,,,发现命名改了就可以了。。。
原本是::model: {prop: "enter",event: "out"},
后来是::model: {prop: "value",event: "input"}, //这个就可以用了
2019-06-03 18:25
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 1951844956@qq.com:
单独发帖,提供示例代码
2019-05-29 11:22
1951844956@qq.com

1951844956@qq.com

新模式下,,自定义组件的v-model在app和小程序不生效怎么说?
2019-05-23 11:17
1750352431@qq.com

1750352431@qq.com

顶起来,uniapp
2019-04-26 16:06
15093568689@163.com

15093568689@163.com

在template 下标签上写indexOf 判断字符串在app中无效,并且过滤器在app中也无效。具体场景:我使用indexOf去判断数组中是否存在某个值和使用过滤器判断图片的路径从而处理图片的src也无效(app预览返回我0)
2019-04-26 14:20
pnwazgx@qq.com

pnwazgx@qq.com

回复 DCloud_heavensoft:
是用uni-app项目
2019-04-21 00:07
DCloud_heavensoft

DCloud_heavensoft

回复 pnwazgx@qq.com:
如果你是cli项目的话, 需要自己npm update升级cli
2019-04-17 16:19
邢天城

邢天城

回复 DCloud_UNI_HT:
麻烦看一下这个问题,谢谢了。https://ask.dcloud.net.cn/question/68976
2019-04-17 15:29
邢天城

邢天城

v-slot好像是不起作用呀,插槽的节点没有显示
2019-04-17 15:15
pnwazgx@qq.com

pnwazgx@qq.com

已升级到1.9,但过滤器filter返回值依旧是0,怎么处理
2019-04-17 14:45
uunique7@qq.com

uunique7@qq.com

请问APP要怎么做页面缓存,Vue里面用到的是keep-alive
2019-04-17 14:24
sharper

sharper

回复 DCloud_UNI_HT:
整理了一部分:http://ask.dcloud.net.cn/question/68681
2019-04-12 17:33
sharper

sharper

回复 DCloud_UNI_HT:
我们整理一下
2019-04-12 16:44
DCloud_UNI_HT

DCloud_UNI_HT

回复 sharper:
都有什么问题, 单独开一个帖子,我看一下什么问题。
2019-04-12 16:22
sharper

sharper

换成了1.8.8版本后,生成的apps好多地方都有问题,官方有好好测试么???
2019-04-12 16:18
DCloud_UNI_HT

DCloud_UNI_HT

回复 978332153@qq.com:
可以
2019-04-12 16:16
DCloud_UNI_HT

DCloud_UNI_HT

回复 1035570650@qq.com:
问题已经修复了,下载最新alpha 版本,在试一下 :http://ask.dcloud.net.cn/article/35765
2019-04-12 16:15
金颖熠

金颖熠

太多受限的地方了,原先一个嵌套的自定义组件(slot嵌套)完全无法使用了,props传递的数据也传不进去了都不知道为啥。。
2019-04-11 20:25
zhangyongkang2008@qq.com

zhangyongkang2008@qq.com

回复 479686314@qq.com:
同样的问题
2019-04-11 18:21
zhangyongkang2008@qq.com

zhangyongkang2008@qq.com

子组件没有生命周期了?
2019-04-11 18:19
MonkeyDLuffy

MonkeyDLuffy

回复 bawangxx@qq.com:
解决了嘛 data中的数据,不能直接用下标获取了
2019-04-11 18:13
闫明

闫明

自定义组件模式 有bug, 组件中的生命周期函数与 微信小程序的自定义组件生命周期函数 不匹配,坑死我
2019-04-11 15:48
1435540729@qq.com

1435540729@qq.com

推流会闪退,新版有bug,请尽快修复更新!
2019-04-11 11:08
bawangxx@qq.com

bawangxx@qq.com

绑定函数的参数不能是object了,可以index,否则报错:undefined is not an object
2019-04-07 01:14
EJ

EJ

一直期待app端性能的提升,终于等到了,棒!!!
2019-04-06 00:49
978332153@qq.com

978332153@qq.com

5+APP 能在模板中用methods么
2019-04-05 23:48
li.shaon@gmail.com

li.shaon@gmail.com

1.8版下,使用uParse插件的页网,在解析较长的html时,IOS下非常非常的卡,但在1.7是完全不卡的。请问有什么解决办法吗
2019-04-04 01:06
479686314@qq.com

479686314@qq.com

回复 Trust:
666! 是我没有设置app-plus - usingComponents:true 。设置后确实可以了。
2019-04-03 16:01
Trust

Trust

回复 479686314@qq.com:
你确定配置启用了新的编译器?使用 1.8.5-alpha 版,manifest.json->app-plus->usingComponents 设置为 true。
测试没有发现所述问题,请单独发帖提供下测试代码。
2019-04-03 15:27
710529585@qq.com

710529585@qq.com

辛苦了,如果能把vue直接编译成nvue就好了,建议你们可以用阿里团队合作,把weex发扬光大,
2019-04-03 13:37
479686314@qq.com

479686314@qq.com

回复 DCloud_UNI_CHB:
谢谢大佬,已用上。但是发现filter在app端有bug,数字使用filter后,不管filter内什么逻辑,最后只会返回整数部分。其他类型使用filter后,不管filter内什么逻辑,最后返回的都是0。而且filter函数定不定义,app端情况都一样,也不报错。
2019-04-03 12:18
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 479686314@qq.com:
看文章最后章节《后续》,新框架在App端已发布群测版,欢迎体验
2019-04-03 11:48
479686314@qq.com

479686314@qq.com

求群测版,app要跟上
2019-04-02 22:28
506453261@qq.com

506453261@qq.com

我还是观望吧,目前还是不是很敢直接拿来做项目呢。目前用H5+插件还行。
2019-04-01 11:50
凯哥

凯哥

强力支持!!
2019-03-30 14:32
不是发哥

不是发哥

class不支持绑定Obejct变量(使用字符串的形式绑定),这在for循环中要怎么绑定样式呢?
比如原来的:class={on:index===i}就可以绑定on样式,新版怎么绑定?发现在小程序都直接报错了。
2019-03-30 14:30
498619363@qq.com

498619363@qq.com

回复 Trust:
麻烦看看,https://ask.dcloud.net.cn/question/67817
2019-03-29 11:22
Trust

Trust

回复 498619363@qq.com:
请单独发帖提供下测试代码,昨天修复了一些第三方组件引入的问题还未重新发布测试,可以内部验证一下是否是同样的问题。
2019-03-29 11:01
498619363@qq.com

498619363@qq.com

新版跟Vant Weapp不兼容?好多组件用新版编译以后在小程序中报错,或者用不了,是编译问题还是vant组件的问题
2019-03-29 10:59
18718500103@163.com

18718500103@163.com

什么时候出正式版?有点迫不及待了
2019-03-28 14:03
扶摇侠客

扶摇侠客

官方不打算答复下我这个问题吗?https://ask.dcloud.net.cn/question/67586
2019-03-28 12:30
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 金颖熠:
具体什么问题?建议单独发帖,详细说明,我们会有工程师跟进
2019-03-27 20:53
1035570650@qq.com

1035570650@qq.com

自定义vue组件使用for问题,无法在插槽里渲染数据,这个最急我觉得,不然组件循环就没任何意义了
2019-03-27 16:49
金颖熠

金颖熠

上个版本的代码迁移过来以后好多bug呀
2019-03-27 14:04
AJXMJC

AJXMJC

回复 DCloud_UNI_CHB:
好的谢谢
2019-03-24 19:24
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 AJXMJC:
微信端已支持,你可以使用群测版测试一下
2019-03-24 19:07
AJXMJC

AJXMJC

支持!!终于支持过滤器了!!
还有scoped 是否已经支持了么?
2019-03-24 14:12
18180924082@163.com

18180924082@163.com

希望做到nvue实现 4 端适配,只需要写一个nvue文件,原生渲染到iOS APP和Android APP,降级渲染到小程序和H5, 如果实现的话,真是无敌了
2019-03-24 13:12
余红杰

余红杰

支持,希望越来越好!
2019-03-23 23:04
源咯

源咯

什么时候可以解决云打包选了ios后项目10m但报已超过40m的bug的哇T-T
2019-03-21 15:49
yuyachong@qq.com

yuyachong@qq.com

牛逼,希望 vue页面直接能编译成weex而不是单独写
2019-03-21 15:38
479686314@qq.com

479686314@qq.com

回复 DCloud_UNI_CHB:
谢谢大佬,我特意上传了个视频,可以看到bug的展现
2019-03-21 14:15
DCloud_UNI_CHB

DCloud_UNI_CHB (作者)

回复 479686314@qq.com:
@DCloud_UNI_HDX 验证一下
2019-03-21 12:19
1606726660@qq.com

1606726660@qq.com

此时此刻 全场由赵公子买单,尖叫声.....
2019-03-21 12:18
479686314@qq.com

479686314@qq.com

官方大佬,麻烦看下我提交的bug http://ask.dcloud.net.cn/m/question/66906
一直没人回复啊
2019-03-21 12:12
ShiningStone

ShiningStone

加油
2019-03-21 11:50
志力兄

志力兄

支持一下
2019-03-21 11:35
75754567@qq.com

75754567@qq.com

赞一个.
2019-03-21 11:23
诗小柒

诗小柒

太期待了
2019-03-21 10:34
银少

银少

终于把性能提上日程了
2019-03-21 10:31
786039294@qq.com

786039294@qq.com

6666
2019-03-21 10:16
scxp

scxp

听起来新特性都很吸引人啊!
2019-03-21 09:45
281302552@qq.com

281302552@qq.com

提升性能赞一个
2019-03-21 09:22
Geeker

Geeker

下载了 哦哦
2019-03-20 21:03
375890534@qq.com

375890534@qq.com

赞! 终于支持“支持在 template 内使用 methods 中的函数”了
2019-03-20 20:22