组件的概念

组件是现代开发的主要里程碑组件重构了分工模子，让大量的轮子出现，让开发者可以拿来轮子直接用，大幅晋升了全部家产的效率

uni-app是有内置组件的这和web开发不一样

web开发基本上不用根底组件，都是找一个三方ui库，全套组件都包含那是因为html的根底组件默认样式不适配手机作风

但uni-app系统不是这样，内置组件就是为手机优化的

但内置组件只能满足根底需求，更多场景，需要扩展组件

扩展组件是基于内置组件的二次封装，从性能上来讲，扩展组件的性能略低于内置组件，所以开发者切勿摈弃内置组件，直接全套用三方UI组件库

uni-app的插件市场，有很多扩大组件，有的是独自的，有的是成套的
有些开发者爱好成套的组件，但留意成套扩展组件也不可能掩盖所有需求，好多场景还是需要单独下载专业组件。

扩大组件的选择

浩繁扩展组件如何抉择？我们首先如果搞清楚组件的分类

组件划分2大近似：1、vue组件（文件后缀为vue）；2、小程序自定义组件（文件后缀为wxml或其他小程序平台特有后缀称号）

• vue组件又分为2个过细项：only for web、全端兼容
• 小程序组件又分为：微信/QQ小程序组件、阿里小程序组件、百度小程序组件、字节跳动小程序组件
  这些组件uni-app都支撑，但受组件本身技能特色限制，在不同端有不一样的支持度
  下面这张表格，可以明白的抒发不同类型的组件的兼容性

从表格中可以很明显看出，更推举使用的是全端兼容的uni标准组件

很多人容易搞错2个题目：

1.一样是vue组件，only for web的和全端的有什么区分？

传统的vue组件，比如elementUI，都是only for web的，里面有大量dom和window对象操作但小程序和App是没有dom这些api的，自然回天乏术跨端利用

想要跨端，其实也不难，做一套不管dom的vue组件即可官方的uni-ui即是如此还有浩繁开发者在插件市场提交了更多这种类型的库。

2.vant是划分web版和weapp版的，千万别弄混

vant的web版操作了dom，所以只能用于web端；而vant weapp是微信小程序组件标准，可以用于微信、App、H5；vant自身并没有提供全端可用的不管dom vue组件

除了兼容性，在性能和生态完善度层面，不同类型组件有什么差异？

1.性能：

vue组件性能好于小程序自定义组件这是因为uni-app在底层对vue数据更新运用了自动不同量更新的机制而小程序自定义组件，默认的setDate写法是没有不同量数据更新的，需要写代码手动实现不同量更新才干达到雷同性能

2.生态完善度

首先除了微信小程序，其他几个平台的小程序几乎是没有三方组件和模板生态的开发其他端小程序，得靠uni-app的生态

再说微信小程序生态，之前在微信小程序平台上一些著名的库（比如wxParse、wx-Echart），实际上在性能、功用、技巧支持上，大多做的不如uni-app生态下的新库好而vant、iview的weapp版，其性能也均不如uni ui

3.其他指标

vue doc：HBuilderX撑持vue doc，组件作者在vue组件源码里编写vue doc，可以让组件使用者写代码不时获得优秀的代码提醒

asycom：uni-app撑持easycom，可以大幅简化组件的引用

vue撑持：如果开发App，可能会波及到nvue原生渲染页面，这种渲染方法撑持的css有限，此时就要鉴别组件是否兼容nvue

再来看看各种成套UI的好坏剖析

uni ui

DCloud官方出了一套扩展组件，这些扩展组件撑持单个组件从插件市场下载，也支撑npm引入uni ui，当然更方便的是在HBuilderX新建项目不时直接抉择uni ui项目模板

uni ui有如下优势：

1.优化逻辑层和视图层的通信折损

非H5端的各个平台，包罗App和各种小程序，其逻辑层和视图层是别离的，两层之间通信交互会见有折损，致使诸如跟手滑动不流利。uni ui在底层会面应用wxs等技能，把恰当的js代码运转在视图层，削减通信折损，包管诸如swiperAction左滑菜单等跟手操作流利顺滑

2.自动不同量diff数据

在uni-app下，开发App和小程序，不需要手动setData，底层自动会晤不同量更新数据但如果运用了小程序组件，则需要按小程序的setData方法来更新数据，很难做到自动diff更新数据

3,背景休止

好多ui组件是见面一直动的，比如轮播希图、跑马灯即便这个窗体被新窗体挡住，它在背景层仍然在耗费着硬件资源在Android的webview版本为chrome66以上，背景操作ui见面引发很严重的性能题目，造成前台界面显明卡顿而uni ui的组件，会面自动断定自己的显示状态，在组件不再可见经常，不会再做动画损耗硬件资源

4.纯粹vue语法

uni ui的引用、开发都是纯粹vue方法而小程序组件的引用注册、开发都是小程序语法，两种语法混杂在一个工程，写的也不舒服，维护也费事

5.与uni统计自动整合

比如运用uni ui的导航栏组件，就不需要写统计的自定义事件来触发页面标题上报uni统计见面自动辨认导航栏组件的标题。近似的，珍藏组件、购物车组件，都可以免打点直接运用

6.uni ui兼容Android 4.4等低端机webview，没有浏览器兼容题目

7.uni ui支撑nvue

App端，uni-app同时撑持webview渲染和原生渲染，而uni ui是可以一套代码同时支撑webview渲染和原生渲染的为了兼容原生渲染，uni ui也做到了纯粹flex布局

8.uni ui内置vue doc，应用组件常常有优秀的代码提醒

9.支撑easycom，利用非常简略

推举在HBuilderX新建项目经常，直接挑选uni ui项目模板，然后在代码里直接讹诈u，所有组件都拉出来，不用援用、不用注册，直接就用

插件市场更多组件

插件市场，有各种玲琅满目的组件、模板
其中成套的全端兼容ui库包罗：

• colorUI css库（颜值很高）
• ThorUI组件库
• graceUI商业支持库
• uViewUI（徐徐升起的新秀）

其他

• 如果你仍坚持利用微信小程序的自定义组件ui，插件市场也有良多vant weapp版的集成示例同时如果留意，小程序自定义组件的性能不如vue组件
• 如果你的nvue文件运用weex编译模式，也支撑weex ui三方商业ui库有graceUI weex版。