vite+ vue3使用$ref语法糖报错

在文档上看到了Vue3语法糖相关的信息，可以看到这是$ref Vue语法糖的写法，但是拿它这套去运行是用不了的，那么，这里我们以使用 Vite + Vue3 项目开发为例，看一下如何开启对 ref 语法糖的支持。

在使用 Vite + Vue3 项目开发时，是由 @vitejs/plugin-vue 插件来实现对 .vue 文件的代码转换（Transform）、热更新（HMR）等。所以，我们需要在 vite.config.js 中给 @vitejs/plugin-vue 插件的选项（Options）传入 refTransform: true。

vite.config.js

export default defineConfig({
  plugins: [
    vue({
      reactivityTransform: true//主要是这个开启，就能使用语法糖了
    }),
    AutoImport({ /* options */
      imports: ["vue", "vue-router"] //这东西是自动导入vue和router，用了它以后，每个vue文件都不必 import { onMounted, reactive, ref, toRef } from 'vue';
 //import { useRoute, useRouter } from 'vue-router'了

    })
  ]