Vue 3 官網(wǎng)文檔探索與上手教程

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

一、Vue 3 正式版發(fā)布

Vue.js 在 2020 年 9 月 19 日凌晨推出了備受矚目的 3.0 版本，正式命名為 “OnePiece”。本文將帶你領(lǐng)略 Vue 3 的全新魅力，跟隨官網(wǎng)文檔一起體驗這一重大更新。

二、測試工具與官方資源

想要深入體驗 Vue 3，首先得了解相關(guān)的測試工具與資源。你可以使用以下工具來輔助你的學(xué)習(xí)與實踐：

1. 谷歌插件（需）

2. 火狐插件

3. Electron桌面應(yīng)用插件

對于原型制作或?qū)W習(xí)目的，你可以將最新版本與灶啟蘆工具配合使用。而在使用 Vue 構(gòu)建大型應(yīng)用程序時，推薦使用 NPM 安裝方法，配合 Webpack 或 Rollup 等模塊捆綁器，這樣能更好地發(fā)揮 Vue 的潛力。Vue 還提供了隨附的工具用于創(chuàng)作單一文件組件，極大簡化了開發(fā)流程。

三、CLI 與項目搭建

Vue 提供了一個官方 CLI（命令行界面），用于快速搭建單頁應(yīng)用。對于 Vue 3，推薦使用 Vue CLI v4.5 以上版本，該版本在 npm 上提供 @vue/cli@next。如果你想要升級，可以在全局范圍內(nèi)重新安裝最新版本的 @vue/cli。安裝完畢后，在 Vue 項目中運行相關(guān)命令。在 dist/NPM 軟件包的目錄中，你會找到許多不同的 Vue.js 版本。你已經(jīng)邁入了 Vue 3.0 的時代！

四、Vue 3 教程

以下內(nèi)容是博主在學(xué)習(xí)過程中的一些記錄與分享。實際上，從 Vue 2 到 Vue 3 的學(xué)習(xí)成本并不高。如果你已經(jīng)熟悉 Vue 2，那么看完這篇文章后，你就可以輕松上手 Vue 3。在學(xué)習(xí)過程中，需要注意以下幾點：

1. Vue 3 的在線源碼編譯地址可以在官網(wǎng)找到。

2. setup 是所有 Composition API 的容器，它是一個函數(shù)，會在 beforeCreate 之前執(zhí)行一次。值得注意的是，在 Vue 3 中，this 不再指向 Vue 實例，訪問 this 會是 undefined。盡量避免在 setup 中使用 this。

3. setup 函數(shù)不能是一個異步函數(shù)（async）。因為異步函數(shù)的返回值是 promise，模板無法看到 return 對象中的屬性。setup 中的屬性與方法不能與 Vue 2 的配置（如 data、methods、computed 等）混用。如果有重名的情況，setup 中的配置會優(yōu)先生效。

五、總結(jié)

通過本文的講解，相信你已經(jīng)對 Vue 3 有了更深入的了解。從測試工具到項目搭建，再到上手教程，我們一步步探索了 Vue 3 的魅力。希望這篇文章能幫助你更好地學(xué)習(xí)與實踐 Vue 3，開啟全新的開發(fā)體驗！深入了解Vue響應(yīng)式系統(tǒng)的重要部分：ref、reactive以及相關(guān)功能特點

--

一、Vue響應(yīng)式系統(tǒng)與ref對象

在Vue中，響應(yīng)式系統(tǒng)是其核心機制之一，它允許開發(fā)者創(chuàng)建響應(yīng)式數(shù)據(jù)對象，當(dāng)數(shù)據(jù)發(fā)生變化時，視圖會自動更新。ref是Vue中用于創(chuàng)建響應(yīng)式數(shù)據(jù)對象的關(guān)鍵概念之一。通過ref，我們可以創(chuàng)建一個包含響應(yīng)式數(shù)據(jù)的引用對象（簡稱ref對象）。這個對象可以是基本類型，也可以是對象。當(dāng)ref對象的值變化時，與之相關(guān)的視圖將會重新渲染。

二、對象的響應(yīng)式處理與ES6 Proxy

對于對象類型的響應(yīng)式數(shù)據(jù)，Vue內(nèi)部基于ES6的Proxy實現(xiàn)。通過代理對象操作源對象內(nèi)部數(shù)據(jù)，Vue能夠追蹤依賴并觸發(fā)相應(yīng)的更新。這種機制確保了當(dāng)對象內(nèi)部的屬性發(fā)生變化時，視圖能夠?qū)崟r更新。

三、與V2中computed和watch的配置功能對比

在Vue的新版本中，computed和watch的配置功能得到了保留并有所發(fā)展。computed用于定義基于已有數(shù)據(jù)的計算屬性，而watch則用于觀察特定數(shù)據(jù)的變化并執(zhí)行相應(yīng)的回調(diào)。兩者在語法上有所差異，但在功能上相輔相成。

四、watchEffect的特點

watchEffect是Vue中一個新的功能，它與watch有所不同。watchEffect不需要指明監(jiān)視的屬性，只需在監(jiān)視的回調(diào)中用到哪個屬性，就會監(jiān)視哪個屬性。這種機制簡化了開發(fā)過程，提高了代碼的可讀性和可維護(hù)性。

五、生命周期與setup函數(shù)

在Vue的新版本中，生命周期函數(shù)被整合到了setup函數(shù)中。這意味著我們可以在setup函數(shù)中處理所有的生命周期，包括創(chuàng)建、更新和銷毀等。這使得組件的邏輯更加集中，易于管理和維護(hù)。

六、特殊類型的響應(yīng)式處理

除了基本的響應(yīng)式處理外，Vue還提供了針對特殊需求的響應(yīng)式處理方式。例如，淺響應(yīng)式適用于對象數(shù)據(jù)結(jié)構(gòu)較深但變化時只是外層屬性變化的情況；而對于后續(xù)功能不會修改對象中的屬性，而是生成新對象來替換的情況，Vue提供了只處理基本數(shù)據(jù)類型的響應(yīng)式處理方式。

七、只讀響應(yīng)式數(shù)據(jù)

在某些情況下，我們可能需要讓某些響應(yīng)式數(shù)據(jù)變?yōu)橹蛔x，以防止其被意外修改。Vue提供了深只讀和淺只讀兩種方式來實現(xiàn)這一需求。深只讀適用于不希望數(shù)據(jù)被任何方式修改的情況，而淺只讀則適用于只希望外層屬性不被修改的情況。

八、轉(zhuǎn)換與標(biāo)記

Vue還提供了將響應(yīng)式對象轉(zhuǎn)換為普通對象的功能。這種轉(zhuǎn)換結(jié)果對象的每個property都是指向原始對象相應(yīng)property的ref。我們還可以標(biāo)記一個對象，使其永遠(yuǎn)不再成為響應(yīng)式對象。這對于復(fù)雜的第三方類庫或當(dāng)渲染具有不可變數(shù)據(jù)源的大列表時尤其有用，跳過響應(yīng)式轉(zhuǎn)換可以提高性能。

九、自定義ref與依賴管理

對于更高級的用例，Vue允許創(chuàng)建自定義的ref，并對其依賴項進(jìn)行跟蹤和更新觸發(fā)進(jìn)行顯式控制。這需要一個工廠函數(shù)來實現(xiàn)，該函數(shù)接收track和trigger函數(shù)作為參數(shù)，并返回一個帶有g(shù)et和set的對象。這種機制使得開發(fā)者能夠更精細(xì)地控制響應(yīng)式數(shù)據(jù)的行為，提高應(yīng)用的性能和可維護(hù)性。

Vue的響應(yīng)式系統(tǒng)通過ref、reactive等機制實現(xiàn)了數(shù)據(jù)的實時更新和視圖的重渲染。深入了解這些概念并合理使用，將有助于我們更高效地開發(fā)Vue應(yīng)用，提升用戶體驗。Vue 3高級特性詳解：從語法到實踐

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

一、父子組件間的通信新語法

在Vue 3中，實現(xiàn)祖與后代組件間的通信變得更加靈活和直觀。父組件可以通過provide選項提供數(shù)據(jù)，而后代組件則可以通過inject選項輕松獲取并使用這些數(shù)據(jù)。這種新的語法極大地簡化了組件間的通信，提高了開發(fā)效率和代碼的可讀性。

二、關(guān)于Ref的語法與檢查

在Vue 3中，我們可以使用ref來創(chuàng)建響應(yīng)式的數(shù)據(jù)對象。如果你想檢查一個值是否為ref對象，或者檢查一個值是否為isReactive對象，Vue 3提供了相應(yīng)的語法和API。我們還可以檢查一個對象是否是由readonly創(chuàng)建的只讀代理，或者是由reactive或readonly創(chuàng)建的proxy。

三、Teleport的巧妙應(yīng)用

Teleport提供了一種干凈的方法，允許我們控制在DOM中哪個父節(jié)點下渲染了HTML。這一特性使得我們不必求助于全局狀態(tài)或?qū)⑵洳鸱譃閮蓚€組件，從而提高了代碼的組織性和可維護(hù)性。

四、異步組件與用戶體驗優(yōu)化

在等待異步組件加載時，我們可以先渲染一些額外內(nèi)容，以提升應(yīng)用的用戶體驗。這是一種優(yōu)化策略，可以讓用戶在等待期間仍然能夠感受到應(yīng)用的響應(yīng)性和流暢性。

五、Vue 3中的API調(diào)整與應(yīng)用實例

在Vue 3中，全局的API（如Vue.x）被調(diào)整到了應(yīng)用實例（app）上。這一變化使得API的使用更加直觀和符合邏輯。由于Vue 3中不再存在this，ref的獲取方式也進(jìn)行了相應(yīng)的調(diào)整。在for循環(huán)元素上綁定ref的方式也有所變化，如果需要從單個綁定獲取多個ref，可以將ref綁定到一個更靈活的函數(shù)上。

組合式API的核心：setup函數(shù)

在Vue 3的組合式API中，setup函數(shù)扮演著核心角色。它允許我們定義組件的邏輯，并且可以觸發(fā)向父組件傳遞信息。通過，我們可以監(jiān)聽組件生命周期中的關(guān)鍵階段，從而更好地控制組件的行為。值得注意的是，setup是一個組件選項，寫在組件導(dǎo)出的對象里。它接受props和context作為參數(shù)，返回的內(nèi)容將暴露給組件的其余部分以及模板。

如何獲取幫助與聯(lián)系

如果你覺得以上內(nèi)容對你有所幫助，歡迎點贊、關(guān)注并評論。我是@鵬多多11997110103，希望我們共同進(jìn)步，交流心得。

END

往期文章推薦：

1. Vue 3組合式API的基礎(chǔ)——setup詳解

2. Vue 3中文文檔組合式API基礎(chǔ)解讀

3. Setup在Vue 3中文文檔中的解讀與應(yīng)用

個人主頁：[個人鏈接]Vue Composition API深入理解：上下文、響應(yīng)式與副作用管理

一、Vue Composition API概述

在Vue中，Composition API為我們提供了一種新的組織組件邏輯的方式。它允許我們更加靈活地組合和復(fù)用代碼，從而更好地管理組件的狀態(tài)和邏輯。

二、context上下文

在Composition API中，context是一個普通的JavaScript對象，它暴露了三個組件的property：attrs、slots和context本身。context不是一個響應(yīng)式對象，因此你可以安全地使用ES6解構(gòu)。attrs和slots是有狀態(tài)的對象，它們會隨著組件的更新而更新。為了避免影響組件的狀態(tài)，你應(yīng)該避免對attrs和slots進(jìn)行解構(gòu)，而應(yīng)以attrs.x或slots.x的方式引用它們的property。

三、響應(yīng)式原理與實現(xiàn)

Vue的響應(yīng)式原理基于ES2015的Proxy實現(xiàn)。通過reactive()函數(shù)，我們可以將一個普通對象轉(zhuǎn)換為響應(yīng)式對象。這個轉(zhuǎn)換是深層的，會影響對象內(nèi)部所有嵌套的屬性。返回的代理對象不等于原始對象，因此建議只使用代理對象，避免依賴原始對象。

還可以使用ref()函數(shù)來創(chuàng)建一個響應(yīng)式的ref對象。ref對象擁有一個指向內(nèi)部值的單一屬性.value。如果傳入的是一個對象，將會對其進(jìn)行深層響應(yīng)轉(zhuǎn)換。

四、computed計算屬性與響應(yīng)式追蹤

在Composition API中，我們可以使用computed API來創(chuàng)建計算屬性。計算屬性有兩種方式：返回一個原始對象的只讀代理，或者立即執(zhí)行一個函數(shù)并響應(yīng)式地追蹤其依賴。當(dāng)依賴發(fā)生變化時，計算屬性會重新運行。

五、生命周期與副作用管理

在setup()函數(shù)中，我們可以使用watchEffect來創(chuàng)建副作用函數(shù)。當(dāng)組件的setup()函數(shù)或生命周期鉤子被調(diào)用時，偵聽器會被鏈接到組件的生命周期，并在組件卸載時自動停止。在某些情況下，我們也可以顯式調(diào)用返回值以停止偵聽。副作用函數(shù)可以接收一個onInvalidate函數(shù)作為參數(shù)，用于注冊清理失效時的回調(diào)。這樣做的原因是，有時我們需要清除一些異步副作用，或者在數(shù)據(jù)請求完成后進(jìn)行一些操作。需要注意的是，我們之所以通過傳入一個函數(shù)來注冊失效回調(diào)，而不是從回調(diào)返回它，是因為返回值對于異步錯誤處理很重要。Vue依賴這個返回的Promise來自動處理Promise鏈上的潛在錯誤。

Vue的響應(yīng)式系統(tǒng)與副作用函數(shù)

Vue的響應(yīng)式緩存與異步刷新

Vue的響應(yīng)式系統(tǒng)通過緩存副作用函數(shù)并異步刷新，避免了因同一tick中多個狀態(tài)改變導(dǎo)致的不必要重復(fù)調(diào)用。組件的更新函數(shù)作為被偵聽的副作用，在隊列中等待執(zhí)行，確保在所有組件更新完成后才運行。

初始化運行與DOM訪問

請注意，初始化運行是在組件掛載(mounted)之前執(zhí)行的。若需在編寫副作用函數(shù)時訪問DOM或模板ref，應(yīng)使用onMounted鉤子。這是確保在DOM元素可用時進(jìn)行操作的推薦方式。

同步執(zhí)行與flush屬性

若副作用需同步執(zhí)行或在組件更新前重新運行，可通過傳遞一個帶有flush屬性的對象作為選項來實現(xiàn)（默認(rèn)值為'post'）。這一特性提供了更大的靈活性，以適應(yīng)不同場景下的需求。

調(diào)試回調(diào)onTrack與onTrigger

onTrack和onTrigger回調(diào)可用于調(diào)試偵聽器的行為。這兩個回調(diào)會接收到包含依賴項信息的調(diào)試器。建議在回調(diào)中使用debugger語句來檢查依賴關(guān)系。值得注意的是，這兩個回調(diào)僅在開發(fā)模式下生效。

Vue 3實踐——路由的實現(xiàn)與優(yōu)化

創(chuàng)建Vue 3項目時，我們通常會直接參考官方文檔進(jìn)行安裝配置。不得不提的是，vite的構(gòu)建速度相比webpack有了顯著的提升，一旦體驗過vite的速度，很難再回到webpack。本次實踐將聚焦于路由的實現(xiàn)與優(yōu)化。

整個頁面通常包含一級路由，如登錄頁、報錯頁和主頁之間的切換。這里是路由切換動畫的主要場所。當(dāng)頂部有導(dǎo)航菜單時，紅色區(qū)域代表二級路由，綠色區(qū)域則是三級路由。

創(chuàng)建Vue 3項目的第一步是安裝vue-router，因為vite默認(rèn)并未包含此模塊。隨后，在src目錄下創(chuàng)建router目錄，并添加index.js和routes.js兩個文件。

在Vue 3中，過渡動畫的實現(xiàn)與Vue 2有所不同。主要是因為在Vue 3中，transition組件的使用方式發(fā)生了變化。具體來說，有兩點需要注意：一是transition組件的位置發(fā)生了改變；二是動畫類名的變化，開始和結(jié)束的類名從Vue 2的樣式變?yōu)榱薴rom和to。直接復(fù)制Vue 2的過渡動畫代碼需要進(jìn)行相應(yīng)的調(diào)整。

uni-app項目支持Vue 3的介紹

隨著Vue 3的發(fā)布，uni-app也逐漸支持了Vue 3。目前，小程序平臺已經(jīng)支持，而H5和App平臺暫不支持。除了支持Vue 3的語法特性外，uni-app特有的生命周期鉤子也支持Composition API，如onLaunch、onShow、onLoad等。

創(chuàng)建支持Vue 3的uni-app項目的流程相對簡單，但使用中的一些注意事項不可忽視。關(guān)于Vue 3的更多信息，可以關(guān)注vue官方文檔vue3中文文檔。目前，僅支持通過cli方式創(chuàng)建支持Vue 3的默認(rèn)模板項目。 基于vue-cli創(chuàng)建項目的詳細(xì)指南與uni-app實時公交車小程序的介紹

一、vue-cli項目創(chuàng)建步驟

如果你之前沒有使用過vue-cli方式創(chuàng)建過項目，那么請按照以下步驟操作：

步驟1：全局安裝vue-cli。如果已經(jīng)安裝，則跳過此步驟。

步驟2：使用以下命令創(chuàng)建vue3工程：

步驟3：創(chuàng)建好工程后，進(jìn)入對應(yīng)目錄。

步驟4：將項目部署到微局碼虛信平臺。你可以將編譯后的文件dist/dev/mp-weixin導(dǎo)入微信開發(fā)者工具運行。也可以將項目拖入HbuildX中運行，以便在不同平臺運行。

歡迎開發(fā)者反饋使用該版本遇到的問題，我們將積極收集意見進(jìn)行改進(jìn)。

二、關(guān)于DCloud與vue3的兼容性問題

DCloud目前之所以不支持vue3的h5和app版，主要是因為vue3組件中語法的變化。這種變化導(dǎo)致uni-app的h5版及app版基礎(chǔ)組件庫與vue3不兼容。除此之外，插件市場的所有插件（包括uniui）也不支持vue3。即便是uni-app已經(jīng)推出的vue3的小程序模式版，也同樣面臨此問題。

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

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

前言：uni-app是一個能夠?qū)崿F(xiàn)多端小程序開發(fā)的框架，可編譯成各種小程序平臺以及h5網(wǎng)頁和安卓app。只需一套代碼，即可運行到各個平臺。對于熟悉vue開發(fā)的小伙伴來說，很容易上手。結(jié)合uview-ui等ui框架，可以開發(fā)出功能豐富、界面精美的小程序。

簡介：本次展示的是基于uni-app和uview-ui開發(fā)的實時公交車小程序。使用hbuild開發(fā)工具新建uni-app項目。由于微信小程序?qū)蠖梭w積的限制，我們采用了分包的方式，以突破2M的限制，達(dá)到20M的允許范圍。

小程序的運行效果如下：

首頁展示

路線規(guī)劃功能

公交實時查詢

附近信息查詢

目前該小程序已經(jīng)上線，可通過二維碼直接體驗。在使用過程中，如有問題，可以直接在小程序的在線客服咨詢。本章只是簡單展示了效果，后續(xù)會分享詳細(xì)的開發(fā)歷程。