自从引入组合式 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：
多余的不再赘述,大家可以自行查看官方文档,接下来我们来看看这个语法糖的具体使用,在项目中怎么配置
打开vite.config.ts,添加如下代码
vue({
reactivityTransform: true, // 启用响应式语法糖$ref $computed $toRef
})在compilerOptions下添加vue/ref-macros, 不然会报错TS2304: Cannot find name '$ref'.虽然不影响使用,但是会影响开发体验
"compilerOptions":{
...
"types": ["vue/ref-macros"]
}在eslintrc.cjs中加上global,不然会提示ESLint: '$ref' is not defined.(no-undef)
module.exports = {
...
globals: {
$ref: "readonly",
$computed: "readonly",
$shallowRef: "readonly",
$customRef: "readonly",
$toRef: "readonly",
}
};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函数定义一个变量，ref扩号里是变量的初始值
import { ref } from 'vue'
let conter=ref(0)
let arr=ref(['我是字符串'])template里的用法
<button @click="conter++">{{conter}}</button>
<div v-for="item in arr">
<p>{{item}}</p>
</div>js里的用法
function add(){
conter.value++
console.log(conter)
arr.value.push('耗子尾汁')
}获取虚拟dom (注意：1、变量名称要和html的一致。2、注意生命周期，要实例创建完成才有虚拟dom)
//html
<div ref="box"></div>
//script
<script setup>
import { ref , onMounted} from "vue";
let box=ref(null)
onMounted(()=>{
console.log(box)
))
</script>
