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结束---------------------------