Ref语法糖 | 青训营笔记这是我参与「第五届青训营」伴学笔记创作活动的第 17 天什么是ref语法糖自从引入组合

这是我参与「第五届青训营」伴学笔记创作活动的第 17 天

什么是ref语法糖

自从引入组合式 API 的概念以来，一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题，而 ref 需要到处使用 .value 则感觉很繁琐，并且在没有类型系统的帮助时很容易漏掉 .value

ref 语法糖的作用是让我们在使用 ref 创建响应式的变量时，可以直接获取和更改变量本身，而不是使用 .value 来获取和更改对应的值。

let count = ref(1)
function add() {
     count.value++
}

变成

let count = $ref(1)
function add() {
     count++
}

每一个会返回 ref 的响应式 API 都有一个相对应的、以 $ 为前缀的宏函数。包括以下这些 API：

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

Ref 语法糖在项目中的使用

####第一步(必须),在vite中启用语法糖开关打开vite.config.ts,添加如下代码

    vue({
      reactivityTransform: true, // 启用响应式语法糖$ref $computed $toRef
    })

第二步(可选),配置tsconfig.json

在compilerOptions下添加vue/ref-macros, 不然会报错TS2304: Cannot find name '$ref'.虽然不影响使用,但是会影响开发体验

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

第三步(可选),配置eslint

在eslintrc.cjs中加上global,不然会提示ESLint: '$ref' is not defined.(no-undef)

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

第四步,配置提示

在env.d.ts中增加一行

/// <reference types="vue/macros-global" />

不想代码中总是有误报错误的行为,可以直接在vue代码中引入`vue/ref-macros`,这样就不用配置`tsconfig.json`和`eslint`了

<script setup lang="ts">
import { $ref } from "vue/macros";
let count = $ref(0)

console.log(count)

function increment() {
  count++
}
</script>

<template>
  <button @click="increment">{{ count }}</button>
</template>

Ref语法糖 | 青训营笔记