全新重构，uni-app实现微信端性能翻倍

多次论证、数月研发，我们重写部门Vue底层、重构uni-app框架，实现了微信端机能翻倍及更多Vue语法支持。

配景

uni-app在初期小心了mpvue，实现了微信小措施端的快速兼容，感激美团点评团队对付开源社区的孝顺！

跟着行使uni-app的开拓者愈来愈多，营业伟大度不绝增进，不少开拓者诉苦uni-app支持的vue语法少，某些场景机能有题目（出格是页面存在伟大组件的环境），这些题目着实是由mpvue的实现机制导致的，我们以伟大组件的机能题目为例扼要声名。

mpvue/wepy 降生之初，微信小措施尚不支持自界说组件，无法举办组件化开拓；mpvue/wepy 为办理这个题目，缔造性的将用户编写的Vue组件，编译为WXML中的模板（template)，这样变相实现了组件化开拓手段，进步代码复用性，这在其时的技能前提下是很棒的技能方案。但云云方案，也导致Vue组件中的数据会被编译为Page中的数据，对组件举办数据更新也会基于路径映射挪用Page.setData。出格是组件较多、数据量交大的页面中，每个组件的局部更新会激发页面级此外全局更新，发生极大的机能开销。

微信其后推出的自界说组件，着实支持组件级此外局部更新，履历证，我们发明组件级此外数据更新，对比页面全局更新，有大幅机能晋升。

其它，mpvue在Vue层举办的vnode对等到数据diff计较不彻底，也会耗损部门机能。

基于这些缘故起因，我们开始了微信端的框架重写事变。

新版特征

机能翻倍

新版 uni-app 调解重写了部门Vue.js底层实现，首要包罗：

•  基于小措施自界说组件实现 Vue.js 的组件化开拓
•  Vue层打消vnode比拟
•  更彻底的diff计较，setData()通信数据量更少

新框架重写后，我们结构了如下测试模子：

•  结构一个列表界面，每个列表项为一个自界说组件
•  上拉加载触发数据更新，每次从当地读取静态数据，屏障收集差别
•  触发数据更新计时开始，页面渲染完毕计时竣事，求那时刻差作为比拟指标（耗时，单元为毫秒）

然后别离行使新、老框架，在统一台手机（vivo nex）长举办多次测试，求其均匀值，获取如下功效：

从测试数据来看，新框架在伟大页面下，机能有翻倍晋升！出格是数据越多、组件越伟大的页面，机能晋升越大！

更多 Vue 语法支持

我们同时加强了uni-app编译器，支持了更多 Vue 语法，具体如下：

•  支持过滤器 filter
•  支持较量伟大的 JavaScript 渲染表达式
•  支持在 template 内行使 methods 中的函数
•  支持 v-html （同 rich-text 的理会）
•  组件支持原闹变乱绑定，如：@tap.native

体验方法

今朝新框架在微信端已完成开拓，其他小措施和App的编译器仍为旧版。我们放出群测版，约请开拓者在微信端抢鲜体验。

开拓者可凭证如下方法建设vue-cli并建设uni-app项目，编译刊行到微信小措施：

# npm script  
# 全局安装vue-cli  
$ npm install -g @vue/cli  
# 建设uni-app项目，会提醒选择项目模板，首次打仗提议选择 hello uni-app 模板  
$ vue create -p dcloudio/uni-preset-vue my-project  
# 进入项目目次  
$ cd my-project  
# dev 模式，编译预览  
$ npm run dev:mp-weixin  
# build 模式，刊行打包  
$ npm run build:mp-weixin 

新老版本切换

为了不影响老项目，uni-app群测版今朝同时内置新、老两个框架，且默认行使老框架，开拓者可通过设置 manifest.json -> mp-weixin -> usingComponents节点启用新编译框架，如下：

// manifest.json  
{  
    // ...  
    /* 小措施特有相干 */  
    "mp-weixin": {  
        "usingComponents":true //启用新框架编译，默以为false  
    }  
} 

假如你行使了新增的vue语法，请留意只有h5和微信支持这些新语法，编译到其他平台时，要用前提编译处理赏罚。

Tips：

•  为担保自界说组件兼容性，运行到微信开拓者器材时，提议将微信基本库配置为最新版本。
•  体验新框架时，有任何题目可能提议，，接待到github提交 issue

近况与将来

春节事后，uni-app1.6版本宣布，新增字节跳动小措施平台支持；至此，实现一套代码、7端宣布！7端别离包罗：App（iOS/Android）、小措施（微信/付出宝/百度/字节跳动）、H5平台，见下图：

大量开拓者热情涌入 uni-app 社区，今朝已有几十个uni-app交换群，下图为一个500人的QQ交换群，建设2天即满群，开拓者的热情可见一斑。

今朝，天天新建设的uni-app项目（包罗测试项目）达数千个，案例早已过万，部门案例见https://uniapp.dcloud.io/case。与Taro等框架清一色微信小措施案例对比，uni-app的跨端案例要富厚许多。

在小措施跨端框架中，uni-app大概是行使人数最多、跨端案例最富厚的前端框架。

（编辑：河北网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!