本篇內(nèi)容主要講解“Vue響應(yīng)性語法糖怎么配置”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學(xué)習(xí)“Vue響應(yīng)性語法糖怎么配置”吧!

創(chuàng)新互聯(lián)專注于荔城網(wǎng)站建設(shè)服務(wù)及定制，我們擁有豐富的企業(yè)做網(wǎng)站經(jīng)驗。 熱誠為您提供荔城營銷型網(wǎng)站建設(shè)，荔城網(wǎng)站制作、荔城網(wǎng)頁設(shè)計、荔城網(wǎng)站官網(wǎng)定制、成都小程序開發(fā)服務(wù)，打造荔城網(wǎng)絡(luò)公司原創(chuàng)品牌,更為您提供荔城網(wǎng)站排名全網(wǎng)營銷落地服務(wù)。

介紹

自從引入組合式 API 的概念以來，一個主要的未解決的問題就是 ref 和 reactive 到底用哪個。reactive 存在解構(gòu)丟失響應(yīng)性的問題，而 ref 需要到處使用 .value 則感覺很繁瑣，并且在沒有類型系統(tǒng)的幫助時很容易漏掉 .value。

例如，下面的計數(shù)器：

使用 ref 定義 count 變量和 increment 方法：

let count = ref(0)

function increment() {
 count.value++
}

而使用響應(yīng)性語法糖，我們可以像這樣書寫代碼：

let count = $ref(0)

function increment() {
 count++
}

1. Vue 的響應(yīng)性語法糖是一個編譯時的轉(zhuǎn)換步驟，$ref() 方法是一個編譯時的宏命令，它不是一個真實的、在運行時會調(diào)用的方法，而是用作 Vue 編譯器的標(biāo)記，表明最終的 count 變量需要是一個響應(yīng)式變量。

2. 響應(yīng)式的變量可以像普通變量那樣被訪問和重新賦值，但這些操作在編譯后都會變?yōu)閹?.value 的 ref。所以上面例子中的代碼也會被編譯成使用 ref 定義的語法。

3. 每一個會返回 ref 的響應(yīng)式 API 都有一個相對應(yīng)的、以 $ 為前綴的宏函數(shù)。包括以下這些 API：

• ref -> $ref

• computed -> $computed

• shallowRef -> $shallowRef

• customRef -> $customRef

• toRef -> $toRef

4. 可以使用 $() 宏來將現(xiàn)存的 ref 轉(zhuǎn)換為響應(yīng)式變量。

const a = ref(0)
let count = $(a)
count++
console.log(a.value) // 1

5. 可以使用 $$() 宏來將任何對響應(yīng)式變量的引用都會保留為對相應(yīng) ref 的引用。

let count = $ref(0)
console.log(isRef($$(count))) // true

$$() 也適用于已解構(gòu)的 props，因為它們也是響應(yīng)式的變量。編譯器會高效地通過 toRef 來做轉(zhuǎn)換：

const { count } = defineProps<{ count: number }>()
passAsRef($$(count))

配置

響應(yīng)性語法糖是 組合式 API特有的功能，且必須通過構(gòu)建步驟使用。

1. 必須，需要 @vitejs/plugin-vue@>=2.0.0，將應(yīng)用于 SFC 和 js(x)/ts(x) 文件。

// vite.config.js
export default {
 plugins: [
   vue({
     reactivityTransform: true
   })
 ]
}

• 注意 reactivityTransform 現(xiàn)在是一個插件的頂層選項，而不再是位于 script.refSugar 之中了，因為它不僅僅只對 SFC 起效。

如果是 vue-cli 構(gòu)建，需要 vue-loader@>=17.0.0，目前僅對 SFC 起效。

// vue.config.js
module.exports = {
 chainWebpack: (config) => {
   config.module
     .rule('vue')
     .use('vue-loader')
     .tap((options) => {
       return {
         ...options,
         reactivityTransform: true
       }
     })
 }
}

如果是 webpack + vue-loader 構(gòu)建，需要 vue-loader@>=17.0.0，目前僅對 SFC 起效。

// webpack.config.js
module.exports = {
 module: {
   rules: [
     {
       test: /\.vue$/,
       loader: 'vue-loader',
       options: {
         reactivityTransform: true
       }
     }
   ]
 }
}

2. 可選，tsconfig.json 文件中添加如下代碼, 不然會報錯 TS2304: Cannot find name '$ref'.，雖然不影響使用,但是會影響開發(fā)體驗：

"compilerOptions":{ "types": ["vue/ref-macros"] }

3. 可選，eslintrc.cjs 文件中添加如下代碼，不然會提示 ESLint: '$ref' is not defined.(no-undef)：

module.exports = { ...globals: {
   $ref: "readonly",
   $computed: "readonly",
   $shallowRef: "readonly",
   $customRef: "readonly",
   $toRef: "readonly",
 }
};

4. 當(dāng)啟用響應(yīng)性語法糖時，這些宏函數(shù)都是全局可用的、無需手動導(dǎo)入。也可以在 vue 文件中顯式引入 vue/macros，這樣就不用配置第二和第三步中的 tsconfig.json 和 eslintrc 了。

import { $ref } from 'vue/macros'

let count = $ref(0)

已廢棄的實驗性功能

• 響應(yīng)性語法糖曾經(jīng)是一個實驗性功能，且已被廢棄，請閱讀廢棄原因。

• 在未來的一個小版本更新中，它將會從 Vue core 中被移除。如需繼續(xù)使用，請通過 Vue Macros 插件。

廢棄原因

尤雨溪在2個星期前（2023 年 2 月 21 日上午 10:05 GMT+8），親自給出了廢棄的原因，翻譯如下：

正如你們中的許多人已經(jīng)知道的那樣，我們在團隊一致同意的情況下正式放棄了這個 RFC。

理由

Reactivity Transform 的最初目標(biāo)是通過在處理反應(yīng)狀態(tài)時提供更簡潔的語法來改善開發(fā)人員的體驗。我們將其作為實驗性產(chǎn)品發(fā)布，以收集來自現(xiàn)實世界使用情況的反饋。盡管提出了這些好處，我們還是發(fā)現(xiàn)了以下問題：

• 失去 .value 使得更難分辨正在跟蹤的內(nèi)容以及哪條線觸發(fā)了反應(yīng)效果。這個問題在小型 SFC 中并不那么明顯，但在大型代碼庫中，心理開銷變得更加明顯，特別是如果語法也在 SFC 之外使用。

• 由于 (1)，一些用戶選擇僅在 SFC 內(nèi)部使用 Reactivity Transform，這會在不同心智模型之間造成不一致和上下文轉(zhuǎn)換成本。因此，困境在于僅在 SFC 內(nèi)部使用它會導(dǎo)致不一致，但在 SFC 外部使用它會損害可維護性。

• 由于仍然會有外部函數(shù)期望使用原始引用，因此反應(yīng)變量和原始引用之間的轉(zhuǎn)換是不可避免的。這最終增加了更多的學(xué)習(xí)內(nèi)容和額外的精神負擔(dān)，我們注意到這比普通的 Composition API 更讓初學(xué)者感到困惑。

最重要的是，碎片化的潛在風(fēng)險。盡管這是明確的選擇加入，但一些用戶對該提議表示強烈反對，原因是他們擔(dān)心他們將不得不與不同的代碼庫一起工作，在這些代碼庫中，有些人選擇了使用它，而有些人則沒有。這是一個合理的擔(dān)憂，因為 Reactivity Transform 需要一種不同的心智模型，它會扭曲 JavaScript 語義（變量賦值能夠觸發(fā)反應(yīng)效果）。

考慮到所有因素，我們認(rèn)為將其作為一個穩(wěn)定的功能使用會導(dǎo)致問題多于收益，因此不是一個好的權(quán)衡。

遷移計劃

• 該功能已經(jīng)通過 Vue Macros 以外部包的形式得到支持。

• 3.3：該功能將被標(biāo)記為已棄用。它將繼續(xù)工作，但您應(yīng)該在此期間遷移到 Vue Macros。

• 3.4：該功能將從核心中刪除，除非使用 Vue Macros，否則將不再有效。

留言

• 雖然 Reactivity Transform 會從官方包中移除，但我認(rèn)為這是一個很好的嘗試。

• 寫得好。我喜歡詳細的 RFC 和基于用戶反饋的客觀評估。最后的結(jié)論很有道理。不要讓完美成為優(yōu)秀的敵人。

• 雖然我很享受這個功能帶來的便利，但我在實際使用中確實發(fā)現(xiàn)了這個潛在的碎片問題。在未來的版本中刪除此功能可能不太情愿，但工程師應(yīng)該認(rèn)真對待。?

• 您是刪除所有功能還是僅刪除 ref.value 進行轉(zhuǎn)換的部分？響應(yīng)式 props 解構(gòu)呢，它會留下來嗎？

• 我一直在將它用于中等規(guī)模的電子商務(wù)網(wǎng)站，沒有任何問題。我理解刪除它背后的基本原理，但在實踐中我發(fā)現(xiàn)它確實是一個很大的改進。所以我的問題是：現(xiàn)在怎么辦？

• 是否建議那些討厭 .value 的人現(xiàn)在盡可能避免使用 ref() 并像以前那樣使用 reactive()？

• .value 是必要的復(fù)雜性。就像任何其他響應(yīng)式庫 xxx.set() 一樣。

• 創(chuàng)建一個轉(zhuǎn)換所有 Reactivity Transform 代碼的包應(yīng)該很容易吧？我也喜歡按照推薦的方式做事。

到此，相信大家對“Vue響應(yīng)性語法糖怎么配置”有了更深的了解，不妨來實際操作一番吧！這里是創(chuàng)新互聯(lián)網(wǎng)站，更多相關(guān)內(nèi)容可以進入相關(guān)頻道進行查詢，關(guān)注我們，繼續(xù)學(xué)習(xí)！