基于uni-app開發(fā)的實時公交車小程序

前言

-

uni-app框架以其跨平臺特性，使得開發(fā)者只需一套代碼，即可編譯成微信小程序、抖音小程序、百度小程序、支付寶小程序、H5網(wǎng)頁以及安卓應用等多個平臺的應用程序。對于熟悉Vue開發(fā)的開發(fā)者來說，uni-app提供了一個極為便利的途徑來上手移動應用開發(fā)。其中，基于uni-app與uview-ui實現(xiàn)的實時公交車小程序，展示了這一框架的強大功能。

項目構建與框架介紹

通過HBuilderX開發(fā)工具新建一個uni-app項目。在早期的HBuilder版本中，可以直接導入uview-ui，但現(xiàn)在需要在插件市場中找到uview-ui并導入到項目中。項目的代碼目錄結構清晰明了，層次分明。

由于微信小程序對后端體積有所限制，為了加載更多的功能而不超過限制，項目采用了分包的方式。這樣做可以突破原有的體積限制，使得小程序能夠包含更多的功能和數(shù)據(jù)。

實時公交車小程序的功能豐富多樣，包括首頁展示、路線規(guī)劃、公交實時查詢、附近信息等功能模塊。每個模塊都設計得十分人性化，方便用戶使用。目前，這款小程序已經(jīng)正式上線，用戶可以通過掃描二維碼來使用。

在使用過程中如果遇到問題，用戶可以直接在小程序的在線客服進行咨詢。后續(xù)還會不斷更新和完善小程序的功能，開發(fā)歷程也值得期待。

vue3官網(wǎng)文檔解讀與體驗

--

Vue.js在2020年9月19日凌晨發(fā)布了備受矚目的3.0版本，被稱為OnePiece的3.0版本，簡稱Vue3。為了體驗新版本的魅力，我們可以跟隨vue的官方文檔來一探究竟。

Vue3的官方文檔地址可以在網(wǎng)上找到。為了測試Vue3的相關功能，可以使用各種測試工具，如谷歌插件、火狐插件以及electron桌面應用插件等。這些工具可以幫助我們更好地理解和使用Vue3的各項功能。

在構建大型應用程序時，推薦使用NPM安裝方法，因為Vue與Webpack或Rollup等模塊捆綁器配合得很好。Vue還提供了用于創(chuàng)作單一文件組件的隨附工具，使得開發(fā)過程更加便捷。Vue提供了一個官方CLI（命令行界面），用于快速搭建單頁應用。對于Vue3，推薦使用Vue CLI v4.5以上版本，該版本對Vue3提供了很好的支持。

升級Vue CLI的過程非常簡單。首先檢查全局安裝的腳手架版本是否在4.5以上（含4.5），然后創(chuàng)建一個新的Vue項目。在創(chuàng)建項目的過程中，終端會顯示一個選項列表，選擇支持Vue3的選項（通常是第二項Vue3Preview），等待安裝完成即可。至此，你已經(jīng)成功邁入了Vue3.0的時代！

基于uni-app開發(fā)的實時公交車小程序展示了跨平臺開發(fā)的便捷性和強大功能。Vue3的發(fā)布為開發(fā)者帶來了更多的選擇和可能性。無論是uni-app還是Vue3，都在不斷地發(fā)展和進步，為開發(fā)者帶來更好的開發(fā)體驗和更多的機會。助您上手Vue3全家桶——詳盡的Vue3教程

一、前言與官網(wǎng)資源

這些內容是我作為博主在學習過程中記錄下來的心得，力求精簡，突出重點。對于Vue框架從V2到V3的升級，其實學習成本并不高。如果您已經(jīng)熟悉Vue2，那么讀完這篇文章，您就能初步掌握Vue3的核心內容。

您可以參考Vue3的官網(wǎng)以及在線源碼編譯地址，深入了解Vue3的詳細配置和使用方法。

二、setup函數(shù)的核心地位

在Vue3中，setup函數(shù)是整個CompositionAPI的容器。它會在組件生命周期的beforeCreate階段之前執(zhí)行一次。值得注意的是，在Vue3中，this不再指向Vue實例，訪問this會是undefined。在使用setup函數(shù)時，需要避免與Vue2的配置方式混淆。

三、setup函數(shù)的特點與限制

在Vue3中，setup函數(shù)有其獨特之處和限制。它不能是一個異步函數(shù)，因為返回值不再是傳統(tǒng)意義上的return對象。如果將其設為異步函數(shù)，模板無法看到return對象中的屬性。如果有與Vue2配置中的重名情況，setup中的配置會優(yōu)先生效。

四、Vue3中的新特性

在Vue3中，引入了許多新特性，如使用ref可以創(chuàng)建一個包含響應式數(shù)據(jù)的引用對象，可以是基本類型也可以是對象。還有computed、watch等配置也有了新的語法和使用方式。其中，watchEffect的特性是不用指明監(jiān)視哪個屬性，監(jiān)視的回調中用到哪個屬性，那就自動監(jiān)視哪個屬性，使用更加靈活。

五、Vue3的生命周期與響應式處理

在Vue3中，所有的生命周期函數(shù)都寫在setup中。對于響應式處理，Vue3提供了多種處理方式，如將響應式對象轉換為普通對象、淺響應式處理、基本數(shù)據(jù)類型的響應式處理等。這些新的響應式處理方式能夠更好地適應不同場景的需求，提高開發(fā)效率和代碼質量。

Vue3相對于Vue2有了很多新的特性和改進，但對于已經(jīng)熟悉Vue2的開發(fā)者來說，學習成本并不高。通過掌握setup函數(shù)的使用、新特性的應用以及響應式處理的方式，您可以快速上手Vue3全家桶，為您的前端開發(fā)帶來更多的可能性。響應式數(shù)據(jù)管理與Vue 3中的新功能

======================

隨著Vue 3的發(fā)布，許多響應式數(shù)據(jù)管理的特性也得到了更新和優(yōu)化。以下是對一些關鍵特性的深入解讀。

響應式數(shù)據(jù)變?yōu)橹蛔x模式

在Vue應用中，有時我們希望某些數(shù)據(jù)能被訪問但不能被修改。為此，Vue提供了將響應式數(shù)據(jù)轉為只讀模式的功能。

深只讀與淺只讀

深只讀：整個對象及其嵌套屬性都被凍結，無法修改。

淺只讀：僅凍結對象本身，內部的嵌套對象仍可以修改。根據(jù)需求選擇合適的凍結方式。

將響應式對象轉為普通對象

在某些情況下，我們可能需要將一個由`reactive`生成的響應式對象轉換為普通對象。這樣的轉換不會影響該對象的初始狀態(tài)，但對其進行的所有操作都不會再觸發(fā)頁面更新。這對于需要直接操作對象而不引起響應式更新的場景非常有用。

標記對象以避免響應式轉換

有些對象或值不應被轉換為響應式。例如，復雜的第三方類庫或含有不可變數(shù)據(jù)源的大列表。通過標記這些對象，我們可以避免不必要的響應式轉換，從而提高性能。

自定義ref及其依賴管理

在Vue 3中，我們可以創(chuàng)建自定義的ref，并對其進行更細粒度的控制。通過工廠函數(shù)，我們可以顯式地管理其依賴項的追蹤和更新觸發(fā)。這為開發(fā)者提供了更大的靈活性。

組件間的通信改進

在Vue中，祖與后代組件間的通信是常見的需求。通過使用`provide`和`inject`選項，父組件可以方便地提供數(shù)據(jù)，而后代組件則可以輕松地使用這些數(shù)據(jù)。

檢查響應式對象類型

Vue 3提供了一系列實用的API來檢查對象的類型。例如，我們可以檢查一個值是否為ref對象，或是isReactive對象。我們還可以檢查一個對象是否是由`readonly`創(chuàng)建的只讀代理或由`reactive`或`readonly`創(chuàng)建的proxy。

Teleport的使用

Teleport提供了一種優(yōu)雅的方式，允許我們控制HTML在DOM中的渲染位置，無需依賴全局狀態(tài)或拆分組件。這使得組件結構更加清晰和靈活。

異步組件與延遲加載

在等待異步組件加載時，我們可以先渲染一些額外內容，以提升用戶體驗。這在單頁應用（SPA）中尤其有用，可以優(yōu)化頁面加載和用戶體驗。

API調整與應用實例化

在Vue 3中，全局的API（如Vue.x）已被調整到應用實例（app）上。由于V3中不再存在`this`關鍵字，ref的獲取方式也相應調整。在for循環(huán)元素上綁定ref的方式也有所變化，不再自動創(chuàng)建$ref數(shù)組。這些調整使得代碼更加簡潔和直觀。

總結，Vue 3在響應式數(shù)據(jù)管理方面的改進為開發(fā)者提供了更大的靈活性和效率。從深只讀到自定義ref的創(chuàng)建，再到組件間通信的優(yōu)化和API的調整，這些新特性使得我們在構建高效、響應式的Vue應用時更加得心應手。從單個綁定獲取多個ref并綁定到一個靈活函數(shù)：Vue 3組合式API詳解

一、語法介紹

在Vue 3的組合式API中，我們可以通過一個組件向其父組件觸發(fā)，實現(xiàn)組件間的通信。通過，我們還可以監(jiān)聽組件生命周期中的關鍵階段，如創(chuàng)建、更新和銷毀等。這些功能為我們提供了強大的工具，使組件更加靈活和可復用。

二、使用方式修改

在Vue 3的組合式API中，我們可以通過定義組件的方式來觸發(fā)并監(jiān)聽生命周期階段。通過的觸發(fā)和監(jiān)聽，我們可以輕松實現(xiàn)父子組件間的數(shù)據(jù)交互和狀態(tài)管理。我們還可以利用Vue 3的生命周期鉤子函數(shù)，如onMounted、onUpdated等，來執(zhí)行特定的操作。

三、深入解析setup函數(shù)

在Vue 3的組合式API中，setup是一個非常重要的組件選項。它是一個接受props和context的函數(shù)，用于初始化組件的狀態(tài)和邏輯。在setup函數(shù)中，我們可以訪問組件的props和context上下文對象。context上下文是一個普通的JavaScript對象，它包含三個重要的屬性：attrs、slots和emit。通過它們，我們可以實現(xiàn)組件間的通信和狀態(tài)管理。setup函數(shù)中的props是響應式的，當傳入新的prop時，它將被更新。這意味著我們可以根據(jù)props的變化來更新組件的狀態(tài)和行為。我們還可以從setup返回一個對象或渲染函數(shù)，以便在組件的模板中使用。這些功能使得Vue 3的組合式API更加強大和靈活。

四、關于reactive和ref的說明

在Vue 3的組合式API中，reactive和ref是兩個重要的函數(shù)。reactive函數(shù)用于創(chuàng)建一個響應式對象，它可以接收一個普通對象并返回該對象的響應式代理。這意味著當對象內部的屬性發(fā)生變化時，視圖將自動更新。ref函數(shù)用于創(chuàng)建一個響應式的引用對象。它接受一個參數(shù)值并返回一個響應式且可改變的ref對象。這兩個函數(shù)都是基于ES2015的Proxy實現(xiàn)的，因此它們返回的對象不同于原始對象。為了保持響應式的特性，建議只使用代理對象而避免依賴原始對象。

五、總結

Vue 3的組合式API提供了強大的工具來創(chuàng)建可復用和可維護的組件。通過深入了解setup函數(shù)、reactive和ref等函數(shù)的使用方式，我們可以更好地利用這些工具來構建高效且靈活的Vue應用程序。通過合理地使用和生命周期鉤子函數(shù)，我們可以實現(xiàn)組件間的通信和狀態(tài)管理，提高應用程序的整體性能。希望這篇文章能夠幫助你更好地理解Vue 3的組合式API，并為你提供有價值的參考。如果你有任何疑問或建議，請隨時提出。我是@鵬多多11997110103，歡迎點贊關注評論。也推薦你閱讀我往期的文章和個人主頁上的其他內容，以獲取更多關于Vue 3的知識和技巧。Vue 3實踐探索——響應式系統(tǒng)與路由管理

一、響應式系統(tǒng)概述

在Vue 3中，響應式系統(tǒng)是其核心特性之一。對于ref對象，它擁有一個指向內部值的單一屬性.value。當傳入一個對象作為ref時，Vue將調用其reactive方法進行深層響應轉換。這意味著對象的任何嵌套屬性都將被轉換為響應式狀態(tài)，當數(shù)據(jù)發(fā)生改變時，視圖將自動更新。

二、computedAPI的使用方式

computedAPI是Vue提供的用于創(chuàng)建計算屬性的功能。它有兩種主要使用方式：

1. 傳入一個對象（響應式或普通）或ref，返回一個原始對象的只讀代理。這個代理是“深層的”，意味著對象內部任何嵌套的屬性也都是只讀的。

2. 立即執(zhí)行傳入的一個函數(shù)，并響應式地追蹤其依賴。當依賴的數(shù)據(jù)發(fā)生變化時，該函數(shù)將重新運行。

三、副作用與偵聽器的管理

在Vue組件的setup()函數(shù)或生命周期鉤子中，可以調用watchEffect來創(chuàng)建偵聽器。這些偵聽器會鏈接到組件的生命周期，并在組件卸載時自動停止。有時候，副作用函數(shù)會執(zhí)行一些異步的副作用，這些響應需要在其失效時清除。為此，可以傳入一個onInvalidate函數(shù)作為參數(shù)，用來注冊清理失效時的回調。

當執(zhí)行數(shù)據(jù)請求時，副作用函數(shù)往往是一個異步函數(shù)。我們知道異步函數(shù)都會隱式地返回一個Promise，但是清理函數(shù)必須在Promise被resolve之前被注冊。Vue依賴這個返回的Promise來自動處理Promise鏈上的潛在錯誤。

Vue的響應式系統(tǒng)會緩存副作用函數(shù)，并異步地刷新它們，以避免同一個tick中多個狀態(tài)改變導致的不必要的重復調用。

四、路由管理實踐

在實際項目中，路由管理是實現(xiàn)頁面導航的關鍵部分。在Vue 3中，我們可以使用Vue Router來實現(xiàn)路由管理。具體的項目創(chuàng)建過程可以參考官方文檔。

在本次實踐中，我們實現(xiàn)了一個常見的后臺管理系統(tǒng)。整個頁面主要由一級路由構成，包括登錄頁、報錯頁和主頁等。這些路由之間的切換是展示路由動畫的主要場所。

為了實現(xiàn)路由的動態(tài)加載和組件的懶加載，我們可以使用Vue Router的動態(tài)路由功能。為了優(yōu)化加載速度，我們還可以結合使用vite構建工具，其速度相比webpack有顯著的提升。

五、調試與優(yōu)化

在開發(fā)過程中，我們可能會遇到需要調試和優(yōu)化的情況。Vue提供了onTrack和onTrigger選項，這兩個回調可以接收到一個包含有關所依賴項信息的調試器，幫助我們檢查依賴關系。這兩個回調僅在開發(fā)模式下生效。

我們還可以使用watchAPI來觀察特定的數(shù)據(jù)源，并在數(shù)據(jù)源變化時執(zhí)行副作用。對于需要同步或在組件更新之前重新運行的副作用，我們可以傳遞一個擁有flush屬性的對象作為選項。

Vue 3的響應式系統(tǒng)和路由管理功能強大且靈活，通過合理使用這些功能，我們可以開發(fā)出高效且用戶體驗良好的Web應用。探究Vue3與uni-app的完美結合：創(chuàng)建步驟與注意事項

一、Vue Router的安裝與配置

在創(chuàng)建Vue3項目時，首先我們需要安裝vue-router，因為Vite默認并未安裝此組件。我們可以參考VueRouter的官網(wǎng)進行安裝。接下來，在src目錄下創(chuàng)建router目錄，并添加兩個關鍵文件：index.js和routes.js。

在這里，我們需要特別注意vue3的過渡動畫transition組件的變化。與vue2相比，vue3的transition組件在用法和動畫類名上都有所調整。主要體現(xiàn)在兩個方面：

1. 在vue2中，transition組件是作為父級包裹路由router-view的，但在vue3中，這一位置發(fā)生了反轉。

2. 動畫類名從vue2的特定命名變?yōu)榱藇ue3的from和to，因此需要對應調整過度動畫的代碼。

二、uni-app對Vue3的支持現(xiàn)狀

隨著vue3的發(fā)布，uni-app也逐漸支持了這一版本。當前，小程序平臺已經(jīng)支持vue3，但h5、App平臺暫不支持。除了支持vue3的語法特性外，uni-app特有的生命周期鉤子也支持CompositionAPI，如onLaunch、onShow、onLoad等。

接下來，我們介紹創(chuàng)建支持vue3的uni-app項目的流程以及使用中的一些注意事項。關于vue3的詳細問題，建議關注vue官方文檔vue3中文文檔。目前，僅支持通過cli方式創(chuàng)建支持vue3的默認模板項目。

三、通過vue-cli創(chuàng)建vue3項目

如果你之前沒有使用過vue-cli方式創(chuàng)建過項目，需要先安裝vue-cli。安裝完成后，按照以下步驟創(chuàng)建vue3工程：

1. 用全局方式安裝vue-cli。

2. 使用命令創(chuàng)建vue3工程。

3. 創(chuàng)建好工程后，進入對應目錄。

4. 將項目部署到微信開發(fā)者工具或HbuildX中，方便運行到各個平臺。

開發(fā)者在使用過程中遇到問題，歡迎及時反饋，我們將積極收集意見，不斷完善。

四、關于uni-app h5和app版對vue3的支持問題

目前，DCloud的uni-app的h5和app版并不支持vue3。這主要是因為vue3的組件中很多語法的寫法發(fā)生變化，導致uni-app的h5版基礎組件庫和app版基礎組件庫的寫法與vue3不兼容。除此之外，插件市場的所有插件（包括uniui）也不支持vue3。即便是uni-app已經(jīng)推出的vue3的小程序版本，也不支持插件市場的插件。

考慮到生態(tài)兼容的重要性，vue官方（尤雨溪）計劃在2021年4月中下旬推出新版，對vue2的語法做兼容。屆時，uni-app的h5版和app版將同時推出，并且插件市場的眾多插件也將自動適配vue3版的uni-app。

五、總結與展望

Vue3與uni-app的結合為我們帶來了更多的可能性。在使用過程中，我們需要關注官方動態(tài)，了解最新的兼容信息，以便更好地利用這些工具進行開發(fā)。隨著技術的不斷進步，我們期待Vue和uni-app在未來能夠為我們帶來更多的驚喜和便利。