feature: 体验ref语法糖

.eslintrc.js

@@ -15,7 +15,6 @@ module.exports = {
   extends: [
     'plugin:vue/vue3-recommended',
     'plugin:@typescript-eslint/recommended',
-    'prettier',
     'plugin:prettier/recommended',
   ],
   parser: 'vue-eslint-parser',

build/vite/plugin/index.ts

@@ -23,9 +23,7 @@ import ElementPlus from 'unplugin-element-plus/vite';
 export function createVitePlugins(isBuild = false, _configEnv: ConfigEnv) {
   const vitePlugins: (Plugin | Plugin[])[] = [
     vue({
-      script: {
-        refSugar: true,
-      },
+      reactivityTransform: true,
     }),
   ];
 

src/locales/en/modules/route.ts

@@ -16,6 +16,7 @@ const route = {
     editor_markdown: 'Markdown',
     userInfo: 'UserInfo',
     userList: 'UserList',
+    refSyntax: 'RefSyntax',
     userDateil: 'UserDateil',
     guide: 'GuidePage',
     thirdParty: 'Third party',

src/locales/zh-ch/modules/route.ts

@@ -16,6 +16,7 @@ const route = {
     editor_markdown: 'Markdown',
     userInfo: '用户管理',
     userList: '用户列表',
+    refSyntax: 'ref语法糖',
     userDateil: '用户详情',
     guide: '引导页',
     thirdParty: '第三方',

src/router/modules/otherRoute/otherRoute.ts

@@ -122,6 +122,12 @@ const safeManagerRoutes: Array<AppRouteRecordRaw> = [
     alwaysShow: true,
     meta: { title: t('route.pathName.userInfo'), icon: 'iEL-avatar' },
     children: [
+      {
+        path: 'refSyntax',
+        name: 'refSyntax',
+        component: () => import('@/views/useradmin/refSyntax/index.vue'),
+        meta: { title: t('route.pathName.refSyntax') },
+      },
       {
         path: 'userlist',
         name: 'userlist',

src/views/useradmin/refSyntax/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="page-container" @click="updateStem">{{ stem }}-{{ x }}-{{ y }}</div>
+</template>
+
+<script setup lang="ts">
+  // import { useMouse } from '@vueuse/core';
+  // import { ref } from 'vue';
+
+  const stem = $ref('admin');
+
+  // 公共方法里面使用$ref导出ref
+  function useMouse() {
+    let x = $ref(0);
+    let y = $ref(0);
+    // 如果直接导出x,y会被识别{x.value,y.value}这样就会使出ref响应式，使用$$()可以保持响应式相当于{x:ref(0),y:ref(0)}
+    return $$({
+      x,
+      y,
+    });
+  }
+
+  // 通过
+  const { x, y } = $(useMouse());
+  console.log(x);
+  // // $ref解构方法返回的ref
+  // const { x, y } = $(useMouse());
+  // console.log(x, y);
+
+  const updateStem = () => {
+    stem = 'update';
+    x = 200;
+  };
+</script>
+
+<style scoped lang="scss"></style>

types/global.d.ts

@@ -1,7 +1,7 @@
 declare module '*.vue' {
-  import { ComponentOptions } from 'vue';
-  const componentOptions: ComponentOptions;
-  export default componentOptions;
+  import { DefineComponent } from 'vue';
+  const Component: DefineComponent<{}, {}, any>;
+  export default Component;
 }
 
 declare type Recordable<T = any> = Record<string, T>;