Vite、Setup 语法糖总结

vite、vue3 使用了很久了，也到了该总结一波的时候了，各位大佬都来 looklook，查缺补漏，总结一下，形成概念，梳理一套属于自己的完整的知识体系， Vue3.2 版本开始才能使用语法糖！先查看自己的 vue 版本是否支持 setup 语法糖，在说怎么用

1、ref、reactive

ref： 接受一个内部值并返回一个响应式且可变的 ref 对象，有一个 .value 属性，可以通过其读取/修改对象的值。

reactive： 创建一个响应式对象，与 ref 不同的是，reactive 接受的参数是一个对象，可以使用 toRef(infoObj)为对象中的每一个属性创建一个 ref, 它可以保持对原属性的响应式链接

Ref

<script setup lang='ts'>
    const flag = ref<Boolean>(true);
    console.log(flag.value); // true

    const user = ref<userItem>({
        name: "张三",
        age: 18,
    });
    console.log(user.value.name); //张三
</script>

Ractive

<script setup lang='ts'>
    const user =reactive({
        name: "张三",
        age: 18,
    });
    console.log(user.name); //张三
</script>

没什么特殊的区别，习惯哪个方便，就用哪个，什么 ref 存在异步问题之类的，可以忽略不计~

2、路由 Router

路由 Router、Route： 页面内 import 引入 vue-router 路由，使用 use 方法初始化路由

App.vue

import { useRouter, useRoute } from "vue-router";

const router = useRouter();
const route = useRoute();

console.log(route.query); // 获取query
console.log(route.params); // 获取params

//路由跳转
router.push({
  path: `/Home`,
  query: {},
  params: {},
});

3、computed

App.vue

<script setup lang='ts'>
    import { computed } from 'vue'

    const a = ref<number>(1)
    const b = ref<number>(2)

    //简写
    const total = computed(()=> {
        return a.value + b.value
    })

    //完整写法
    const total = computed({
        get(){
            return total
        },
        set(value){
            total += 1
        }
    })
</script>

4、vuex/store

App.vue

<script setup lang="ts">
  import {useStore} from 'vuex' const store = useStore() //获取store数据
  console.log(store.state.xxx) //调用commit方法
  store.commit('commit方法名','参数') //调用action方法
  store.dispatch('action方法名','参数')
</script>

5、await 的支持

setup 语法糖中可直接使用 await ，不需要写 async ， setup 会自动变成 async

6、数据的声明与使用

由于 setup 不需要写 return，所以直接声明数据即可。

App.vue

<script setup lang='ts'>
    const demo = ref<String>('')
</script>

7、父子组件通信

7.1、 父组件内调用子组件，无需使用 components 对象注册组件

7.2、 子组件接收父组件传递来的数据，使用 defineProps 对象接收

7.3、 子组件向父组件传递数据，需先在 defineEmits 内注册 emit 函数名，然后才可以使用 emit('函数名','参数')进行父子通信

parent.vue父组件

<template>
    //调用子组件->接收方法、传递数据
    <child @getChildFunc="getChildFunc" data="data数据"/>
</template>
<script setup lang='ts'>
    import child from './child.vue'
    //只写重点
    const getChildFunc = val => {
        console.log('子组件传递来的数据' + val) // '子组件传递来的数据child-data'
    }
</script>

child.vue子组件

<template>
    <button @click='childSendFunc'>点击-给父组件传递数据</button>
</template>
<script setup lang='ts'>
    const props = defineProps({
        data: String,
    });
    const emit = defineEmits(["getLeaveListFunc"]);
    childSendFunc = ()=>{
        console.log(props.data) // 'data数据'
        emit('getChildFunc','child-data')
    }
</script>

8、vite.config.ts 基础配置

vite.config.ts

import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

//gzip压缩
import viteCompression from "vite-plugin-compression";

import path from "path";

export default defineConfig({
  plugins: [
    vue(),
    viteCompression({
      //gzip压缩（不懂->百度）
      verbose: true,
      disable: false,
      threshold: 1024,
      algorithm: "gzip",
      ext: ".gz",
    }),
  ],
  base: "./", //文件引用路径
  server: {
    host: "localhost",
    port: "8081",
    proxy: {
      "/api": {
        target: "http://localhost:3000", //代理目标端口
        changOrigin: true, //是否跨域
        rewrite: (path) => path.replace(/^\/api/, ""), //代理使用api，但是访问的后台接口不会增加/api这个路径（如果加上了，可能引起接口404）
      },
    },
  },
  resolve: {
    alias: {
      //路径别名
      // 如果报错__dirname找不到，需要安装node,执行yarn add @types/node --save-dev
      "@": path.resolve(__dirname, "src"),
      comps: path.resolve(__dirname, "src/components"),
    },
  },
  css: {
    preprocessorOptions: {
      scss: {
        //引入全局less文件
        additionalData: `@import "./src/assets/css/hack.less";`,
      },
    },
  },
});