位置: IT常识 - 正文
vue3中使用ref语法糖(vue的ref怎么用)
编辑：rootadmin推荐整理分享vue3中使用ref语法糖(vue的ref怎么用)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:vue中使用rem,vue3.0中的ref,vue3 ref函数,vue3 ref用法,vue3使用$refs,vue3.0ref怎么用,vue3.0ref怎么用,vue3 ref用法,内容如对您有帮助，希望把文章链接给更多的朋友！
自从引入组合式 API 的概念以来，一个主要的未解决的问题就是 ref 和响应式对象到底用哪个。响应式对象存在解构丢失响应性的问题，而 ref 需要到处使用 .value 则感觉很繁琐，并且在没有类型系统的帮助时很容易漏掉 .value
以上是官方原话,大概就是新的语法糖,可以让我们更方便的使用ref,而不用每次都写.value,大概就是把这样的代码,简化成这样
<script setup lang="ts">import { ref } from 'vue'const count = ref(0)console.log(count.value)function increment() {count.value++}</script><template><button @click="increment">{{ count }}</button></template>简化成这样
<script setup lang="ts">let count = $ref(0)console.log(count)function increment() {count++}</script><template><button @click="increment">{{ count }}</button></template>
每一个会返回 ref 的响应式 API 都有一个相对应的、以 $ 为前缀的宏函数。包括以下这些 API：
1.ref -> $ref 2.computed -> $computed 3.shallowRef -> $shallowRef 4.customRef -> $customRef 5.toRef -> $toRef
多余的不再赘述,大家可以自行查看官方文档,接下来我们来看看这个语法糖的具体使用,在项目中怎么配置
第一步(必须),在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",}}; 如果不嫌麻烦,又不想代码中总是有误报错误的行为,可以直接在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> 最后最近找到一个VUE的文档，它将VUE的各个知识点进行了总结，整理成了《Vue 开发必须知道的36个技巧》。内容比较详实，对各个知识点的讲解也十分到位。
有需要的小伙伴，可以点击下方卡片领取，无偿分享
上一篇：YOLOv5图像分割中的NMS处理(yolov3图像识别)
