Vue의 반응형 구문 설탕은 더 이상 사용되지 않습니다!

이 글은 Vue의 최신 상황을 소개합니다. 주로 Vue의 반응형 구문 설탕에 대해 설명합니다. 관심 있는 친구들이 읽어보면 도움이 될 것입니다.

소개

복합 API 개념이 도입된 이후로 ref와 reactive 중 어느 것을 사용해야 하는지가 해결되지 않은 주요 질문입니다. reactive는 해체로 인해 응답성을 잃는 문제가 있는 반면, ref는 어디에서나 .value를 사용해야 하기 때문에 매우 번거롭고 없이는 작동하지 않습니다. 유형 시스템의 도움으로 .value를 놓치기 쉽습니다. 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：

• ref -> $ref
• computed -> $computed
• shallowRef -> $shallowRef
• customRef -> $customRef
• toRef -> $toRef

4. 可以使用 $() 宏来将现存的 ref 转换为响应式变量。

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

5. 可以使用 $$() 宏来将任何对响应式变量的引用都会保留为对相应 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
    })
  ]
}

• 注意 reactivityTransform 现在是一个插件的顶层选项，而不再是位于 script.refSugar 之中了，因为它不仅仅只对 SFC 起效。

如果是 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
        }
      }
    ]
  }
}

2. 可选，tsconfig.json 文件中添加如下代码, 不然会报错 TS2304: Cannot find name '$ref'.，虽然不影响使用,但是会影响开发体验：

"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. 当启用响应性语法糖时，这些宏函数都是全局可用的、无需手动导入。也可以在 vue 文件中显式引入 vue/macros，这样就不用配置第二和第三步中的 tsconfig.json 和 eslintrc
예를 들어 다음 카운터는

import { $ref } from 'vue/macros'

let count = $ref(0)

ref를 사용하여 count 변수와 increment 메서드를 정의합니다.

rrreee

반응형을 사용하는 동안 구문 설탕, 다음과 같은 코드를 작성할 수 있습니다:
• rrreee

  Vue의 반응형 구문 설탕은 컴파일 시간 변환 단계이고 $ref() 메서드는 컴파일 시간 매크로 명령입니다. , 런타임에 호출되는 실제 메서드는 아니지만 Vue 컴파일러의 플래그로 사용되어 최종 count 변수가

  반응형 변수
여야 함을 나타냅니다.

• 반응형 변수는 일반 변수처럼 액세스하고 재할당할 수 있지만 이러한 작업은 컴파일 후에 .value를 사용하여 ref가 됩니다. 따라서 위 예제의 코드도 ref를 사용하여 정의된 구문으로 컴파일됩니다. ref를 반환하는 모든 반응형 API에는 $ 접두사가 붙은 해당 매크로 함수가 있습니다. 다음 API 포함:

ref -> $computed
shallowRef -> $customRef
toRef ->

$() 매크로를 사용하여 기존 ref를 반응 변수로 변환할 수 있습니다.

rrreee

$$() 매크로를 사용하여 반응 변수에 대한 참조를 해당 ref에 대한 참조로 유지할 수 있습니다. .
🎜rrreee🎜$$()는 구조 해제된 props도 반응형 변수이기 때문에 작동합니다. 컴파일러는 toRef를 통해 효율적으로 변환을 수행합니다. 🎜rrreee🎜Configuration🎜🎜응답형 구문 설탕은 🎜Composition API🎜 전용 기능이며 빌드 단계에서 사용해야 합니다. 🎜
🎜필수, @vitejs/plugin-vue@>=2.0.0이 필요하며 SFC 및 js(x)/ts(x) 파일에 적용됩니다. 🎜🎜rrreee

🎜 reactivityTransform은 이제 플러그인의 최상위 옵션이며 더 이상 script.refSugar에 없습니다. SFC의 경우 적용됩니다. 🎜🎜🎜vue-cli로 빌드된 경우 vue-loader@>=17.0.0이 필요합니다. 현재는 SFC에서만 작동합니다. 🎜rrreee🎜 webpack + vue-loader로 빌드한 경우 vue-loader@>=17.0.0이 필요합니다. 현재는 SFC 효과를 위해 🎜rrreee

🎜선택 사항, tsconfig.json 파일에 다음 코드를 추가하세요. 그렇지 않으면 오류가 보고됩니다. TS2304: Cannot find name '$ref'. , 사용에는 영향을 미치지 않지만 개발 경험에는 영향을 미칩니다: 🎜🎜rrreee
🎜선택 사항, eslintrc.cjs에 다음 코드를 추가합니다. 그렇지 않으면 ESLint: '$ref' is not Defined.(no-undef)：🎜🎜rrreee
🎜반응형 구문 설탕이 활성화되면 다음 매크로가 표시됩니다. 기능은 전 세계적으로 사용 가능하며 수동 작업이 필요하지 않습니다. 또한 vue 파일에 vue/macros를 명시적으로 도입할 수 있으므로 tsconfig.json 및 eslintrc를 구성할 필요가 없습니다. 두 번째와 세 번째 단계 > . 🎜🎜rrreee🎜더 이상 사용되지 않는 실험적 기능🎜🎜🎜🎜반응형 구문 슈거는 한때 실험적 기능이었으며 더 이상 사용되지 않습니다. 🎜지원 중단 이유🎜를 읽어보세요. 🎜🎜🎜🎜향후 마이너 버전 업데이트를 통해 Vue 코어에서 제거될 예정입니다. 계속 사용하고 싶다면 🎜Vue Macros🎜 플러그인을 사용해 보세요. 🎜🎜🎜🎜 포기 이유🎜🎜 Yuxi님이 2주 전(2023년 2월 21일 오전 10:05 GMT+8)에 직접 포기 이유를 알려주었습니다. 번역은 다음과 같습니다. 🎜🎜많은 분들처럼 사람으로서. 이미 알고 있듯이 우리는 팀의 합의에 따라 이 RFC를 공식적으로 포기했습니다. 🎜🎜🎜이유🎜🎜

Reactivity Transform의 원래 목표는 반응 상태를 처리할 때 더 깔끔한 구문을 제공하여 개발자 경험을 개선하는 것이었습니다. 우리는 실제 사용으로부터 피드백을 수집하기 위해 실험적인 제품으로 출시하고 있습니다. 이러한 제안된 이점에도 불구하고 우리는 다음과 같은 문제를 발견했습니다.

• .value를 잃으면 무엇이 추적되고 있는지, 어떤 줄이 반응 효과를 트리거하는지 파악하기가 더 어려워집니다. 이 문제는 작은 SFC에서는 덜 분명하지만 대규모 코드 베이스에서는 정신적 오버헤드가 더욱 분명해집니다. 특히 구문이 SFC 외부에서도 사용되는 경우 더욱 그렇습니다. .value 使得更难分辨正在跟踪的内容以及哪条线触发了反应效果。这个问题在小型 SFC 中并不那么明显，但在大型代码库中，心理开销变得更加明显，特别是如果语法也在 SFC 之外使用。

• 由于 (1)，一些用户选择仅在 SFC 内部使用 Reactivity Transform，这会在不同心智模型之间造成不一致和上下文转换成本。因此，困境在于仅在 SFC 内部使用它会导致不一致，但在 SFC 外部使用它会损害可维护性。

• 由于仍然会有外部函数期望使用原始引用，因此反应变量和原始引用之间的转换是不可避免的。这最终增加了更多的学习内容和额外的精神负担，我们注意到这比普通的 Composition API 更让初学者感到困惑。

最重要的是，碎片化的潜在风险。尽管这是明确的选择加入，但一些用户对该提议表示强烈反对，原因是他们担心他们将不得不与不同的代码库一起工作，在这些代码库中，有些人选择了使用它，而有些人则没有。这是一个合理的担忧，因为 Reactivity Transform 需要一种不同的心智模型，它会扭曲 JavaScript 语义（变量赋值能够触发反应效果）。

考虑到所有因素，我们认为将其作为一个稳定的功能使用会导致问题多于收益，因此不是一个好的权衡。

迁移计划

• 该功能已经通过 Vue Macros 以外部包的形式得到支持。
• 3.3：该功能将被标记为已弃用。它将继续工作，但您应该在此期间迁移到 Vue Macros。
• 3.4：该功能将从核心中删除，除非使用 Vue Macros，否则将不再有效。

留言

• 虽然 Reactivity Transform 会从官方包中移除，但我认为这是一个很好的尝试。
• 写得好。我喜欢详细的 RFC 和基于用户反馈的客观评估。最后的结论很有道理。不要让完美成为优秀的敌人。
• 虽然我很享受这个功能带来的便利，但我在实际使用中确实发现了这个潜在的碎片问题。在未来的版本中删除此功能可能不太情愿，但工程师应该认真对待。?
• 您是删除所有功能还是仅删除 ref.value 进行转换的部分？响应式 props 解构呢，它会留下来吗？
• 我一直在将它用于中等规模的电子商务网站，没有任何问题。我理解删除它背后的基本原理，但在实践中我发现它确实是一个很大的改进。所以我的问题是：现在怎么办？
• 是否建议那些讨厌 .value 的人现在尽可能避免使用 ref() 并像以前那样使用 reactive()？
• .value 是必要的复杂性。就像任何其他响应式库 xxx.set()
• (1)로 인해 일부 사용자는 SFC 내에서 Reactivity Transform만 사용하기로 선택합니다. 이는 서로 다른 정신 모델 간에 불일치와 컨텍스트 전환 비용을 발생시킵니다. 따라서 딜레마는 SFC 내부에서만 사용하면 불일치가 발생하지만 SFC 외부에서 사용하면 유지 관리성이 손상된다는 것입니다.
여전히 원시 참조를 사용할 것으로 예상되는 외부 함수가 있기 때문에 반응 변수와 원시 참조 간의 변환은 불가피합니다. 이로 인해 더 많은 학습 콘텐츠와 추가 정신 부하가 추가되었으며, 이는 일반 Composition API보다 초보자에게 더 혼란스럽다는 것을 알았습니다.

가장 중요한 것은 잠재적인 조각화 위험입니다. 이는 명시적인 선택이지만 일부 사용자는 일부는 이를 사용하기로 선택하고 다른 일부는 No.를 사용하기로 선택한 경우 다른 코드 기반으로 작업해야 한다는 우려로 인해 제안에 강한 반대를 표명했습니다. Reactivity Transform에는 다른 정신 모델이 필요하고 JavaScript 의미 체계가 왜곡되기 때문에 이는 타당한 우려입니다(변수 할당은 반응 효과를 유발할 수 있음).

모든 것을 고려해 볼 때, 이것을 안정적인 기능으로 사용하면 이점보다 더 많은 문제가 발생할 수 있으므로 좋은 절충안이 아니라고 생각합니다.

🎜마이그레이션 계획🎜

🎜이 기능은 이미 Vue Macros🎜를 통해 외부 패키지로 지원됩니다. 🎜🎜3.3: 이 기능은 더 이상 사용되지 않는 것으로 표시됩니다. 계속 작동하지만 그동안 Vue Macros로 마이그레이션해야 합니다. 🎜🎜3.4: 이 기능은 코어에서 제거되며 Vue 매크로를 사용하지 않으면 더 이상 작동하지 않습니다. 🎜🎜🎜댓글 남기기🎜
🎜Reactivity Transform이 공식 패키지에서 제거되겠지만 좋은 시도라고 생각합니다. 🎜🎜잘 썼어요. 나는 상세한 RFC와 사용자 피드백을 기반으로 한 객관적인 평가를 좋아합니다. 최종 결론은 의미가 있습니다. 완벽함이 선함의 적이 되도록 두지 마십시오. 🎜🎜이 기능의 편리함을 즐기면서도 실제 사용 시 잠재적인 조각화 문제를 발견했습니다. 향후 릴리스에서 이 기능을 제거하는 것을 다소 꺼릴 수도 있지만 엔지니어는 이를 심각하게 받아들여야 합니다. ?🎜🎜모든 함수를 제거하시겠습니까, 아니면 ref.value가 변환을 수행하는 부분만 제거하시겠습니까? 반응형 props 디스트럭처링은 어떻습니까? 계속 유지되나요? 🎜🎜중규모 전자상거래 사이트에서 문제없이 사용하고 있습니다. 나는 그것을 제거하는 이유를 이해하지만 실제로는 그것이 정말 큰 개선이라는 것을 알았습니다. 그래서 내 질문은: 지금은 무엇입니까? 🎜🎜 .value를 싫어하시는 분들은 이제 가능하면 ref() 사용을 피하고 이전처럼 reactive()를 사용하라고 권하고 싶으신가요? 🎜🎜.value는 필요한 복잡성입니다. 다른 반응형 라이브러리 xxx.set()와 같습니다. 🎜🎜모든 Reactivity Transform 코드를 변환하는 패키지를 만드는 것은 쉬워야겠죠? 나는 또한 권장되는 방식으로 일을 하는 것을 좋아합니다. 🎜🎜🎜...🎜🎜🎜🎜추천 학습: "🎜vue.js 비디오 튜토리얼🎜"🎜🎜🎜

위 내용은 Vue의 반응형 구문 설탕은 더 이상 사용되지 않습니다!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!