最新，Vue 中的響應性語法糖已廢棄

介紹

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

例如，下面的計數器：

<template>
  <button @click="increment">{{ count }}</button>
</template>
複製代碼

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

let count = ref(0)

function increment() {
  count.value++
}
複製代碼

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

let count = $ref(0)

function increment() {
  count++
}
複製代碼

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

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

  3. 每一個會返回 ref 的響應式 API 都有一個相對應的、以 $ 爲前綴的宏函數。包括以下這些 API：

  1. 可以使用 `$()` 宏來將現存的 `ref` 轉換爲響應式變量。
const a = ref(0)
let count = $(a)
count++
console.log(a.value) // 1
複製代碼
  1. 可以使用 `$$()` 宏來將任何對響應式變量的引用都會保留爲對相應 `ref` 的引用。
let count = $ref(0)
console.log(isRef($$(count))) // true
複製代碼

$$() 也適用於已解構的 props，因爲它們也是響應式的變量。編譯器會高效地通過 toRef 來做轉換：

const { count } = defineProps<{ count: number }>()
passAsRef($$(count))
複製代碼

配置

響應性語法糖是 組合式 API 特有的功能，且必須通過構建步驟使用。

  1. 必須，需要 `@vitejs/plugin-vue@>=2.0.0`，將應用於 SFC 和 js\(x\)/ts\(x\) 文件。
// vite.config.js
export default {
  plugins: [
    vue({
      reactivityTransform: true
    })
  ]
}
複製代碼

如果是 vue-cli 構建，需要 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 構建，需要 vue-loader@>=17.0.0，目前僅對 SFC 起效。

// webpack.config.js
module.exports = {
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: {
          reactivityTransform: true
        }
      }
    ]
  }
}
複製代碼
  1. 可選，`tsconfig.json` 文件中添加如下代碼, 不然會報錯 `TS2304: Cannot find name '$ref'.`，雖然不影響使用,但是會影響開發體驗：
"compilerOptions":{ "types": ["vue/ref-macros"] } 
複製代碼
  1. 可選，`eslintrc.cjs` 文件中添加如下代碼，不然會提示 `ESLint: '$ref' is not defined.(no-undef)`：
module.exports = { globals: {
    $ref: "readonly",
    $computed: "readonly",
    $shallowRef: "readonly",
    $customRef: "readonly",
    $toRef: "readonly",
  }
}; 
複製代碼
  1. 當啓用響應性語法糖時，這些宏函數都是全局可用的、無需手動導入。也可以在 vue 文件中顯式引入 `vue/macros`，這樣就不用配置第二和第三步中的 `tsconfig.json` 和 `eslintrc` 了。
import { $ref } from 'vue/macros'

let count = $ref(0)
複製代碼

已廢棄的實驗性功能

  1. 響應性語法糖曾經是一個實驗性功能，且已被廢棄，請閱讀廢棄原因 [1]。

  2. 在未來的一個小版本更新中，它將會從 Vue core 中被移除。如需繼續使用，請通過 Vue Macros[2] 插件。

廢棄原因

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

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

理由

Reactivity Transform 的最初目標是通過在處理反應狀態時提供更簡潔的語法來改善開發人員的體驗。我們將其作爲實驗性產品發佈，以收集來自現實世界使用情況的反饋。儘管提出了這些好處，我們還是發現了以下問題：

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

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

  3. 由於仍然會有外部函數期望使用原始引用，因此反應變量和原始引用之間的轉換是不可避免的。這最終增加了更多的學習內容和額外的精神負擔，我們注意到這比普通的 Composition API 更讓初學者感到困惑。

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

考慮到所有因素，我們認爲將其作爲一個穩定的功能使用會導致問題多於收益，因此不是一個好的權衡。

遷移計劃

留言

關於本文

作者：zkj

https://juejin.cn/post/7206604884057325605

本文由 Readfog 進行 AMP 轉碼，版權歸原作者所有。
來源：https://mp.weixin.qq.com/s/sJwu1uXKUWEBJpXkT_51Ow

猜你喜歡