### 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++
}
```
#### 結尾大哥圖！！！
