Vue3.2的setup语法糖和Hook函数 (强烈推荐) - 掘金 (juejin.cn)

toRaw 和 markRaw（取消响应式）

●toRaw: 。作用:将一个由reactive生成的响应式对象转为普通对象。 D使用场景:用于读取响应式对象对应的普通对象，对这个普通对象的所有操作，不会引起页面更新。 ●markRaw: 。作用:标记一个对象，使其永远不会再成为响应式对象。 。应用场景: 1.有些值不应被设置为响应式的，例如复杂的第三方类库等。 2.当渲染具有不可变数据源的大列表时，跳过响应式转换可以提高性能。

provide() 和 inject()

import { ref, provide } from 'vue'

const foo = ref('hello')
// 提供静态值
provide('foo', foo)


------------子组件

const bar = inject('foo')
return{bar}

watch监听函数

	const obj = reactive({
      msg: '奇奇怪怪可可爱爱'
    })
    
	watch(() => obj.msg,(v1, v2) => {
        // v1 就是被监听数据的最新值
        // v2 就是被监听数据的原有值
        console.log(v1, v2)
        // 总结：如果侦听对象中当个属性，需要使用箭头函数的方式
        // 侦听更少的数据有利于提高性能
      }
    )

路由跳转

1.首先在需要跳转的页面引入API---useRouter

import { useRouter } from 'vue-router'

2.在跳转页面定义router变量

 const router = useRouter()

3.用router.push跳转页面

// 字符串
router.push('home')
// 对象
router.push({ path: 'home' })
// 命名的路由
router.push({ name: 'user', params: { userId: '123' }})
// 带查询参数，变成 /register?userId=123
router.push({ path: 'register', query: { userId: '123' }})

4.如果有参数的话，在接收页面引入API--useRoute

import { useRoute } from 'vue-router'

5.在接收页面定义变量route，获取传过来的变量

//query
let userId=route.query.userId;
//params
let userId=route.params.userId;

值存入缓存

• sessionStorage

  也称会话缓存，当用户关闭浏览器窗口后，数据就会被删除；

  sessionStorage.setItem("key","value");//存储
  sessionStorage.getItems("key");//按可以进行取值
  sessionStorage.removeItems("key");//按key单个删除
  sessionStorage.clear();//删除全部数据
  sessionStorage.length;//获取数据的数量
  sessionStorage.valueOf();//获取全部值
  123456
  

• localstorage

  储存的数据没有时间限制，只要不删除，都会存在

  localstorage.setItem("key","value");//保存数据
  localstorage.getItem("key");//读取数据
  localstorage.removeItem("key",);//删除单个数据
  localstorage.clear();//删除所有数据
  localstorage.key(index);//得到某个索引的key
  key和value都必须为字符串，web Storage的API只能操作字符串
  

TS报错 绑定元素“id”隐式具有“any”类型

方案一，修改tsconfig
是修改tsconfig.json，加下面这行参数屏蔽检查，从而不报错。

"suppressImplicitAnyIndexErrors":true,

TS报错 类型“never”上不存在属性“name”

将他的类型转为 null as any 即可

   subDataForm:{}   //修改之前
   subDataForm: null as any  //修改之后

TS报错 类型“any”的参数不能赋给类型“never”的参数

this.formData.push(newUser as never);

勾起整个页面刷新

location.reload()   // 相当于F5

location.replace(location)   // 刷新并且清除上一页缓存

使用命令跳转链接 （本窗口、新窗口）

新窗口跳转

     window.open('https://www.baidu.com/')

本窗口跳转

 window.location.href = 'https://www.baidu.com/'

setup 语法 script 中写name

下载包： npm i vite-plugin-vue-setup-extend -D

在 vite.config.ts 中定义

import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
+import VueSetExtend from 'vite-plugin-vue-setup-extend'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
+   VueSetExtend()
  ],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  }
})

<script setup lang="ts" name="person">
defineProps<{
  msg: string
}>()
</script>

props 中使用枚举 | props 中强调是否必传

  interface Props {
    level?: 1 | 2 | 3 | 4 | 5 | 6 | undefined;
    title?: String;
    icon?: String;
    padding?: Boolean;
    iconColor?: String;
  }
  const theProps = withDefaults(defineProps<Props>(), {
    level: 6,
  });				

防止按钮重复点击

v-prevent-reclick

  <el-button v-prevent-reclick @click="onClick">按钮重复点击</el-button>

main.ts

import { createApp } from 'vue'
const Vue = createApp(App)

// 注册自定义指令 v-prevent-reclick
Vue.directive('prevent-reclick', {
    beforeMount(el, binding) {
        el.disabled = false; // 初始化时启用按钮
        el.addEventListener('click', () => {
            el.disabled = true; // 点击后禁用按钮
            setTimeout(() => {
                el.disabled = false; // 在指定的时间后重新启用按钮
            }, binding.value || 1000); // 使用 binding.value 来设置等待时间，默认为 1000 毫秒
        });
    },
    unmounted(el) {
        // 组件卸载时移除事件监听器
        el.removeEventListener('click');
    },
});

封装一个console.log 样式

使用

  import { log } from '@@utils/log';

  const theTable = [{ aa: 1, bb: 2 }];
  const theObj = {
    aa: 1,
    bb: 2,
  };
  log.info(theObj);
  log.error('member-storage');
  log.success('6');
  log.warning('member-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storagmember-storage');
  log.image(
    '打印img',
    'https://p3-passport.byteacctimg.com/img/user-avatar/a04c9a09205424e6207169f6301926b9~60x60.awebp',
  );
  log.title('member-storage');
  log.table('the-table', theTable);

封装

// src/utils/prettyLog.ts

const isEmpty = (value: any) => {
    return value == null || value === undefined || value === '';
};

const prettyPrint = (title: string, text: any, color: string) => {
    if (typeof text === 'object') {
        console.log(text);
    } else {
        console.log(
            `%c ${title}%c${text} %c`,
            `background:${color};border:1px solid ${color}; padding: 1px; border-radius: 2px 0 0 2px; color: #fff;`,
            `border:1px solid ${color}; padding: 1px; border-radius: 0 2px 2px 0; color: ${color};`,
            'background:transparent'
        );
    }
};

const titlePrint = (title: string) => {
    console.log(`%c ${title}`, 'font-size: 20px; font-weight: bold; color: #333;');
};

const tablePrint = (title: string, data: any[]) => {
    console.groupCollapsed(title);
    console.table(data);
    console.groupEnd();
};

const imagePrint = (title: string, url: string, scale = 1) => {
    const img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload = () => {
        const c = document.createElement('canvas');
        const ctx = c.getContext('2d');
        if (ctx) {
            c.width = img.width;
            c.height = img.height;
            ctx.drawImage(img, 0, 0);
            const dataUri = c.toDataURL('image/png');

            console.log(
                `%c ${title}`,
                `font-size: 1px;
         padding: ${Math.floor((img.height * scale) / 2)}px ${Math.floor((img.width * scale) / 2)}px;
         background-image: url(${dataUri});
         background-repeat: no-repeat;
         background-size: ${img.width * scale}px ${img.height * scale}px;
         color: transparent;
        `
            );
        }
    };
    img.src = url;
};

const prettyLog = () => {
    const info = (textOrTitle: any, content = '') => {
        const title = isEmpty(content) ? 'Info' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#909399');
    };

    const error = (textOrTitle: any, content = '') => {
        const title = isEmpty(content) ? 'Error' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#F56C6C');
    };

    const warning = (textOrTitle: any, content = '') => {
        const title = isEmpty(content) ? 'Warning' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#E6A23C');
    };

    const success = (textOrTitle: any, content = '') => {
        const title = isEmpty(content) ? 'Success' : textOrTitle;
        const text = isEmpty(content) ? textOrTitle : content;
        prettyPrint(title, text, '#67C23A');
    };

    const title = (text: string) => {
        titlePrint(text);
    };

    const table = (title: string, data: any[]) => {
        tablePrint(title, data);
    };

    const image = (title: string, imageUrl: string) => {
        imagePrint(title, imageUrl);
    };

    return {
        info,
        error,
        warning,
        success,
        title,
        table,
        image
    };
};

// 只在开发环境中使用
export const log =
    import.meta.env.MODE === 'development'
        ? prettyLog()
        : {
            info: () => { },
            error: () => { },
            warning: () => { },
            success: () => { },
            title: () => { },
            table: () => { },
            image: () => { }
        };