vue3中使用ref语法糖

最新推荐文章于 2024-02-16 22:55:25 发布

Web_boom

最新推荐文章于 2024-02-16 22:55:25 发布

阅读量1.3k

点赞数 1

文章标签： react.js javascript 前端

本文链接：https://blog.csdn.net/Android_boom/article/details/127589792

版权

本文介绍了Vue3中新的ref语法糖，它简化了使用ref的方式，避免了.value的频繁使用。文章详细讲解了如何在vite中启用语法糖开关，以及在tsconfig.json和eslint配置中进行相应设置，以优化开发体验。同时，文中提供了一份前端大厂面试宝典的领取信息。

摘要由CSDN通过智能技术生成

自从引入组合式 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 -&