Vue의 반응형 구문 설탕은 더 이상 사용되지 않습니다!-View.js-php.cn

이 글은 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++
}

로그인 후 복사

Vue 的响应性语法糖是一个编译时的转换步骤，$ref() 方法是一个编译时的宏命令，它不是一个真实的、在运行时会调用的方法，而是用作 Vue 编译器的标记，表明最终的 count 变量需要是一个响应式变量。
响应式的变量可以像普通变量那样被访问和重新赋值，但这些操作在编译后都会变为带 .value 的 ref。所以上面例子中的代码也会被编译成使用 ref 定义的语法。
每一个会返回 ref 的响应式 API 都有一个相对应的、以 $ 为前缀的宏函数。包括以下这些 API：

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

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

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

로그인 후 복사

可以使用 $$() 宏来将任何对响应式变量的引用都会保留为对相应 ref 的引用。

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

로그인 후 복사

$$() 也适用于已解构的 props，因为它们也是响应式的变量。编译器会高效地通过 toRef 来做转换：

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

로그인 후 복사

配置

响应性语法糖是 组合式 API 特有的功能，且必须通过构建步骤使用。

必须，需要 @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
        }
      }
    ]
  }
}

로그인 후 복사

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

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

로그인 후 복사

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

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

로그인 후 복사

当启用响应性语法糖时，这些宏函数都是全局可用的、无需手动导入。也可以在 vue 文件中显式引入 vue/macros，这样就不用配置第二和第三步中的 tsconfig.json 和 eslintrc

import { $ref } from 'vue/macros'

let count = $ref(0)

로그인 후 복사

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

rrreee

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

$()

ref

rrreee

$$()

ref

$$()

props

toRef

@vitejs/plugin-vue@>=2.0.0

reactivityTransform

script.refSugar

vue-cli

vue-loader@>=17.0.0

webpack

vue-loader

vue-loader@>=17.0.0

tsconfig.json

TS2304: Cannot find name '$ref'.

eslintrc.cjs

ESLint: '$ref' is not Defined.(no-undef)

vue/macros

tsconfig.json

eslintrc

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 외부에서 사용하면 유지 관리성이 손상된다는 것입니다.

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

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

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