uniapp和vue的差別是什麼

區別：uniapp使用小程式的標籤，vue使用web端的標籤；除此之外，還新增了一批手機端常用的新元件。 uniapp的api是參考小程式的，因而與瀏覽器端的api有所不同。 uni不支援vue-router，使用自帶的路由。

本教學操作環境：windows7系統、uni-app2.5.1&&vue2.9.6版本、thinkpad t480電腦。

uniapp和vue的區別

#元件/標籤的變化

##以前是html標籤，現在是小程式標籤。

p 改成view
• span、font 改成text
• a 改成navigator
• img 改成image
• #input 還在，但type屬性改成了confirmtype
• form、button、checkbox、radio、label、textarea、canvas、video
• 這些還在。
  
select 改成picker
• iframe 改成web-view
• ul、li沒有了，都用view取代
• audio 不再推薦使用，改成api方式，背景音訊api文檔
• 其實舊的HTML標籤也可以在uni-app裡使用，uni-app編譯器會在編譯時把老標籤轉為新標籤，例如把p編譯成view。但不推薦這種用法，調試H5端時容易混亂。
  

除了改變外，新增了一批手機端常用的新元件

scroll-view 可區域捲動檢視容器

swiper 可滑動區域視圖容器

icon 圖示

rich-text 富文本（無法執行js ，但可渲染各種文字格式和圖片）

progress 進度條

##slider 滑桿指示器

##switch 開關選擇器

• camera相機

• #live-player 直播

• map 地圖

• cover-view 可覆寫原生元件的視圖容器

• #cover-view需要多強調幾句，uni-app的非h5端的video、map、canvas、textarea是原生元件，層級高於其他元件。如需覆蓋原生元件，例如在map上加個遮罩，則需要使用cover-view元件

除了內建元件，還有很多開源的擴充元件，把常用操作都進行封裝，DCloud建立了外掛程式市場收錄這些擴充元件，詳見插件市場

js的變化

js的變化，分為運行環境變化、資料綁定模式變化、api變化3部分。

運行環境從瀏覽器變成v8引擎

• #標準js語法和api都支持，例如if、for、settimeout、indexOf等。

但瀏覽器專用的window、document、navigator、location對象，包括cookie等存儲，只有在瀏覽器中才有，app和小程式都不支援。

可能有些人以為js等於瀏覽器裡的js。其實js是ECMAScript組織管理的，瀏覽器中的js是w3c組織基於js規範補充了window、document、navigator、location等專用物件。

在uni-app的各個端中，除了h5端，其他端的js都運行在一個獨立的v8引擎下，不是在瀏覽器中，所以瀏覽器的物件無法使用。如果你做過小程式開發，對此應當很了解。

這意味著依賴document的許多HTML的函式庫，例如jqurey無法使用。

當然app和小程式支援web-view元件，裡面可以載入標準HTML，這種頁面仍然支援瀏覽器專用物件window、document、navigator、location。

以前的dom操作，改成vue的MVVM模式

• 現在前端趨勢是去dom化，改用mvvm模式，更簡潔的寫法，大幅減少程式碼行數，同時差量渲染效能更好。

uni-app使用vue的資料綁定方式解決js和dom介面互動的問題。

如果你想改變某個dom元素的顯示內容，例如一個view的顯示文字：

以前是給view設id，然後js裡透過選擇器取得dom元素，進一步透過js進行賦值操作，修改dom元素的屬性或值。

如下示範了一段程式碼，頁面中有個顯示的文字區和一個按鈕，點擊按鈕後會修改文字區的值

  
     
         
     
     
       123  
       修改为789  
     

現在的做法，是vue的綁定模式，給這個dom元素綁定一個js變量，在script中修改js變量的值，dom會自動變化，頁面會自動更新渲染

如果你學過小程式的資料綁定，但不了解vue，要注意：

小程式的資料綁定參考了vue，但自己修改了一些。在uni-app中只支援標準的vue，不支援小程式的資料綁定語法

• 小程式裡的setData在uni-app裡並不存在，因為vue就是自動雙向資料綁定的。直接透過賦值方式修改數據，如果資料綁定到介面上，介面會自動更新渲染

• js api的變化

• 
  # #因為uni-app的api是參考小程式的，所以和瀏覽器的js api有很多不同，例如

  • alert,confirm 改成 uni.showmodel

  • ajax 改成 uni.request

  • cookie、session 没有了，local.storage 改成 uni.storage

  uni-app的js api还有很多，但基本就是小程序的api，把wx.xxx改为uni.xxx即可。

  uni-app在不同的端，支持条件编译，无限制的使用各端独有的api，

  css的变化

  标准的css基本都是支持的。

  选择器有2个变化：*选择器不支持；元素选择器里没有body，改为了page。微信小程序即是如此。

  page{  
  }

  单位方面，px无法动态适应不同宽度的屏幕，rem无法用于nvue/weex。如果想使用根据屏幕宽度自适应的单位，推荐使用rpx，全端支持。 尺寸单位文档

  uni-app推荐使用flex布局，并默认就是flex布局，这个布局思路和传统流式布局有点区别。但flex的有趣在于，不管是什么技术都支持这种排版，web、小程序/快应用、weex/rn、原生的iOS、Android开发，全都支持flex。它是通吃所有端的新一代布局方案。相关教程请自行百度学习。

  uni-app的vue文件里支持所有web排版方式，不管是流式还是flex。但nvue里，只支持flex，因为它在app端是使用原生排版引擎渲染的。

  注意css里背景图和字体文件，尽量不要大于40k，因为会影响性能。在小程序端，如果要大于40k，需放到服务器侧远程引用或base64后引入，不能放到本地作为独立文件引用。

  工程结构和页面管理

  uni-app的工程结构有单独的要求

  每个可显示的页面，都必须在 pages.json 中注册。如果你开发过小程序，那么pages.json类似app.json。如果你熟悉vue，这里没有vue的路由，都是在pages.json里管理。

  原来工程的首页一般是index.html或default.html，是在web server里配的。而uni-app的首页，是在pages.json里配的，page节点下第一个页面就是首页。一般在/pages/xx的目录下。

  app和小程序中，为了提升体验，页面提供了原生的导航栏和底部tabbar，注意这些配置是在pages.json中做，而不是在vue页面里创建，但点击事件的监听在显示的vue页面中做。

  在vue中，以前的js事件监听概念改为了生命周期概念。

  	当uni-app 初始化完成时触发（全局只触发一次）
  onShow	当 uni-app 启动，或从后台进入前台显示
  onHide	当 uni-app 从前台进入后台
  onError	当 uni-app 报错时触发
  onUniNViewMessage	对 nvue 页面发送的数据进行监听，
  onUnhandledRejection	对未处理的 Promise 拒绝事件监听函数（暂时只支持 CLI 创建的项目使用 CLI 工程，更新 uni 相关版本到 2.0.0-alpha-28020200701003 即可支持 onShareTimeline）

  如果你熟悉小程序开发的话，对比变化如下：

  • 原来app.json被一拆为二。页面管理，被挪入了uni-app的pages.json；非页面管理，挪入了manifest.json

  • 原来的app.js和app.wxss被合并到了app.vue中

  更多编程相关知识，请访问：编程视频！！

以上是uniapp和vue的差別是什麼的詳細內容。更多資訊請關注PHP中文網其他相關文章！