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

背景

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

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

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

新版特性1：性能翻倍

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

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

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

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

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

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

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

新版特性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手动升级编译器。