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：

• 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)

已废弃实验男性性功能

• 响应性语法糖曾是一个实验男性性功能，且已经被废旧，请参考废旧缘故。

• 在接下来的一个小版本升级中，这将是从 Vue core 里被清除。如果需要正常使用，请根据 Vue Macros 软件。

废旧缘故

尤雨溪在2个星期前（2023 年 2 月 21 日早上 10:05 GMT 8），亲身提出了废弃缘故，汉语翻译如下所示：

如同大家中的许多人已知道的那般，大家在团队一致同意后宣布选择放弃这一 RFC。

原因

Reactivity Transform 的最开始总体目标是由在对待反映的状态下提供更加简约的词法来改变开发者的感受。大家将其作为试验性产品展示，以搜集来源于真实世界应用情况的反馈。虽然给出了这种益处，大家还是看到了几个问题：

• 丧失 .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() 一样。
• 创建一个变换全部 Reactivity Transform 代码的包应当非常容易吧？我也很喜欢依照介绍的方法办事。

• ...

强烈推荐学习培训：《vue.js视频教程》