### Vue3 提了个 [Ref Sugar 的 RFC](https://link.juejin.cn?target=https%3A%2F%2Fgithub.com%2Fvuejs%2Frfcs%2Fdiscussions%2F369 "https://github.com/vuejs/rfcs/discussions/369")，即 `ref` 语法糖，目前还处理实验性的（Experimental）阶段。在 RFC 的动机（Motivation）中，Evan You 介绍到在 Composition API 引入后，一个主要未解决的问题是 `refs` 和 `reactive` 对象的使用。而到处使用 `.value` 可能会很麻烦，如果在没使用类型系统的情况下，也会很容易错过
```
const test = ref(1)
const btn = () =>{
test.value++
}
```
### 这样一些用户更倾向于只使用 `reactive`，这样就不用处理使用 `refs` 的 `.value` 问题。而 `ref` 语法糖的作用是让我们在使用 `ref` 创建响应式的变量时，可以直接获取和更改变量本身，而不是使用 `.value` 来获取和更改对应的值。简单的说，**站在使用层面**，我们可以告别使用 `refs` 时的 `.value` 问题
```
const test = $(ref(1))
const btn = () =>{
test++
} // 这样就可以不用.value了
```
### vue3+vite需要在vite.config.js配置,是由 `@vitejs/plugin-vue` 插件来实现对 `.vue` 文件的代码转换（Transform）、热更新（HMR）等。所以，我们需要在 `vite.config.js` 中给 `@vitejs/plugin-vue` 插件的选项（Options）传入 `refTransform: true`：
```
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue({ refTransform: true })]
})
```
### 这样插件就可以根据传入的选项中 `refTransform` 的值判断是否需要对 `ref` 语法糖进行特定的代码转换。我们refTransform这里设置的是 `true`，显然它是会对 `ref` 语法糖执行特定的代码转换。
### 这样就可以使用$ref()语法糖了
```
const test = $ref(1)
const btn = () =>{
test++
}
```
#### 结尾大哥图！！！
