建站
咨詢
售后
建站咨詢
新聞中心
Vue 正在不斷發(fā)展，目前，在Vue 3 中有多種定義組件的方法。從選項到組合再到類 API，情況大不相同，如果您剛剛開始，可能會感到困惑。讓我們定義一個簡單的組件并使用所有可用的方法重構(gòu)它。
創(chuàng)新互聯(lián)建站主要為客戶提供服務(wù)項目涵蓋了網(wǎng)頁視覺設(shè)計、VI標志設(shè)計、營銷網(wǎng)站、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、移動網(wǎng)站建設(shè)、微商城、網(wǎng)站托管及網(wǎng)頁維護、WEB系統(tǒng)開發(fā)、域名注冊、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計、SEO優(yōu)化排名。設(shè)計、前端、后端三個建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標準。已經(jīng)為木屋行業(yè)客戶提供了網(wǎng)站營銷推廣服務(wù)。
1. Options API
這是在 Vue 中聲明組件的最常見方式。從版本 1 開始可用，您很可能已經(jīng)熟悉它。一切都在對象內(nèi)聲明，數(shù)據(jù)在幕后由 Vue 響應(yīng)。它不是那么靈活，因為它使用 mixin 來共享行為。
2.Composition API
經(jīng)過多次討論、來自社區(qū)的反饋，以及令人驚訝的是，在這個 RFC 中，有很多戲劇性的內(nèi)容，在 Vue 3 中引入了 Composition API。 目的是提供更靈活的 API 和更好的 TypeScript 支持。這種方法在很大程度上依賴于設(shè)置生命周期掛鉤。
如您所知，使用這種混合方法需要大量樣板代碼，而且設(shè)置函數(shù)很快就會失控。在遷移到 Vue 3 時，這可能是一個很好的中間步驟，但是語法糖可以讓一切變得更干凈。
3.Script setup
在 Vue 3.2 中引入了一種更簡潔的語法。通過在腳本元素中添加設(shè)置屬性，腳本部分中的所有內(nèi)容都會自動暴露給模板。通過這種方式可以刪除很多樣板文件。
4. Reactivity Transform
這是非常有爭議的，被刪除了！這使得腳本設(shè)置成為本文的明確答案。（26/1/2023 更新）
以下代碼段中演示的腳本設(shè)置存在問題。
{{ counter }}
{{ double }}
正如您所注意到的，使用 .value 訪問反應(yīng)式計數(shù)器感覺不自然，并且是混淆和錯誤輸入的常見來源。
有一個實驗性解決方案利用編譯時轉(zhuǎn)換來解決此問題。反應(yīng)性轉(zhuǎn)換是一個可選的內(nèi)置步驟，它會自動添加此后綴并使代碼看起來更清晰。
import { computed } from 'vue'
let counter = $ref(0)
counter++
function increase() {
counter++
}
const double = computed(() => {
return counter * 2
})
{{ counter }}
{{ double }}
$ref 需要一個構(gòu)建步驟，但在訪問變量時刪除了 .value 的必要性。啟用后它在全球范圍內(nèi)可用。
5.Class API
Class API 已經(jīng)可用很長時間了。通常與 Typescript 搭配使用是 Vue 2 的可靠選擇，并且被認真考慮為默認的 Vue 3 語法。
但經(jīng)過多次長時間的討論后，它被放棄了，取而代之的是 Composition API。
它在 Vue 3 中可用，但工具嚴重缺乏，官方建議遠離它。無論如何，如果您真的喜歡使用類，您的組件將看起來像這樣。
{{ counter }}
{{ double }}
結(jié)論
那哪個最好呢？這取決于典型的反應(yīng)，盡管在這種情況下并非如此。從 Vue 2 遷移時，選項和類 API 可以用作中間步驟，但它們不應(yīng)該是您的選擇。
如果您沒有構(gòu)建階段，則組合 API 設(shè)置是唯一的選擇，但由于大多數(shù)項目都是使用 Webpack 或 Vite 生成的，因此使用腳本設(shè)置既是可能的，也是鼓勵的，因為大多數(shù)可訪問的文檔都使用這種方法。
新聞名稱：五種在Vue3中定義組件的方法
分享地址：http://www.dlmjj.cn/article/coiegjp.html
