Vue3的语法糖，$ref()用法（Ref 语法糖，告别 .value 的写法）

Vue3 提了个 Ref Sugar 的 RFC，即 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++
}

结尾大哥图！！！