vue3+ts api 代码结构

原创已于 2023-05-22 09:29:55 修改 · 374 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue #typescript

于 2023-05-15 16:41:27 首次发布

本文介绍了在Vue3中结合Vite和TypeScript使用API和组件的方法，包括ref和reactive声明响应式变量，定义Props类型，计算属性的创建和类型标注，以及监听器的使用。同时，详细讲解了父子组件间通信的emit功能，并提到了Vue3中的新特性如setup语法糖。

vue3 + vite + ts 使用api及组件，ts与组合api:
通过setup 语法糖： <script lang="ts" setup name="AddPage"> 业务 </script>

业务：
1、ref reactive 变量声明:

import { ref, reactive  } from 'vue'

import type { Ref } from 'vue'


// 使用： obj.value.type 取值与赋值（通过.value） 基础类型推导
const obj = ref({
     type: "checkbox",
    showCheckedAll: true,
    onlyCurrent: false
 })

 // 使用： rowSelection.type  直接取值   
 const rowSelection = reactive({
    type: "checkbox",
    showCheckedAll: true,
    onlyCurrent: false
});


2 标注类型
const year: Ref<string | number> = ref('2020')

2.1 传入一个泛型参数，来覆盖默认的推导行为：
// 得到的类型：Ref<string | number>
const year = ref<string | number>('2020')


3 reactive 通过接口标注类型

interface Book {
  title: string
  year?: number
}

const book: Book = reactive({ title: 'Vue 3的 指引' })

2、父子传参 defineProps , 通过withDefaults配置默认值:

a、defineProps() 宏函数支持从它的参数中推导类型：

b、 “运行时声明”，因为传递给 defineProps() 的参数会作为运行时的 props 选项使用。

// 标准类型

const props = defineProps({
  foo: { type: String, required: true },
  bar: Number
})

//  “运行时声明”
//2.1 无默认值：
const props1 = defineProps<{
        name: string;
        isActive: boolean;
        rightDisable: boolean;
        tabStyleType: number;
        modelValue: { key: number; title: string; subTitle: string };
    }>();
// 2.2 通过 withDefaults编译器设置默认值： 解构默认值
const props2 = withDefaults(
    defineProps<{
        name: string;
        isActive: boolean;
        rightDisable: boolean;
        tabStyleType: number;
        modelValue: { key: number; title: string; subTitle: string };
    }>(),
    {
        isActive: false,
        rightDisable: false,
        tabStyleType: 1
    }
);


3 通过单接口定义：将 props 的类型移入一个单独的接口中
interface Props {
  foo: string
  bar?: number
}

const props = defineProps<Props>()

3、计算属性

// 3.1 取值：
  const rightTabs = computed(() => {
       return [{ label: "页面设置", value: 1 }];
  });
// 3.2 双向：
const previewArr = computed({
    get: () => {
        return obj;
    },
    set: (newVal) => {
        updata(newVal);
    }
});


标注类型：
const double = computed<number>(() => {
  // 若返回值不是 number 类型则会报错
  return  333 * 20;
})

4、监听器 watch

4.1 基础

watch(sortType, () => {
    getData();
});


4.2 深度
watch(
    (): any => route?.query?.tab, // 1 source: WatchSource<any> 监听的数据源
    () => {       // 2 cb: WatchCallback 监听回调
        const tab = route?.query?.tab;
        if (tab) {
            active.value = tab as Tlabel;
            previewActive.value = tab as Tlabel;
        }
    },
    { deep: true, immediate: true } // 3、options?: WatchOptions 配置
);

5、子组件通信与父组件 emit



5.1  方法一： 标注类型
const emits = defineEmits<{
    (e: "update:modelValue", data: any): void;
    (e: "rightClick"): void;
}>();
5.2  方法二：运行时
const emits = defineEmits(["update:modelValue", "rightClick"]);

使用 emits("update:modelValue", newVal);
     emits("rightClick", newVal);

二、小拓展：

(1)、vue3 常用的操作符号：

1、 ?? ： numObj ?? "报错结果值"

2、链式操作符 '' ?. " 具有短路功能： obj?.data?.name

（2）插件： 1、状态 pinia 2、处理事件 dush .....

--------------------------笔记1结束---------------------------