vue3，2024前端开发社招面试总结+解答分享

userInfo:userInfoType[]

}
//如果使用reactive，建议使用下面的深层数据类型，我们在点的时候不会破坏reactive的proxy代理
const data =reactive({
menuList:[],
userInfo:[]
})
或者
//不推荐使用 reactive() 的泛型参数，因为处理了深层次 ref 解包的返回值与泛型参数的类型不同。推荐下方的显式标注类型
const data:dataType =reactive({
menuList:[],
userInfo:[]
})
//处理数据
const handleData = ()=>{
//mock数据
const res = [{menuId:111,meuName:‘haha’}]
data.menuList = res
}
//---------------------------------------------------------------------------------------
//对于浅层的数据类型，我们并不推荐使用reactive，ref更适合，下方仅做了解
interface dataType {
menuId:number,
menuName:string
}
const data = reactive<dataType[]>([])
//处理数据
const handleData = ()=>{
//mock数据
const res = [{menuId:111,meuName:‘haha’}]
//这里赋值不能直接=赋值，否则会破坏proxy代理，所以需要解构push进去
dataType.push(…res)
}
//因为是push进去的，难免会因为重复请求，而造成数据重复，这个时候在适当的时候置空数据，同样不能使用=[]进行置空，而是：
dataType.slice(0)

### 获取组件 ref 实例+ts


使用 vue3 和 ts 时，为了获取 组件 ref 实例，就需要在 ref 函数的泛型中指定类型。如何获取组件的类型呢？vue 官方文档中 TypeScript 支持里已经告诉我们了一个获取组件类型的方法，InstanceType<typeof 组件名称>，使用方式如下：

//为了获取组件的类型，我们首先需要通过 typeof 得到其类型，再使用 TypeScript 内置的 InstanceType 工具类型来获取其实例类型：
const $userForm = ref<InstanceType|null>(null);

### ref实例+ts

//子组件
<NewsDialog ref=“news” @refreshData=“getList()”>
//导入子组件
import NewsDialog from ‘./components/NewsDialog.vue’
//获取子组件实例
const news = ref<InstanceType>()
//打开消息弹窗
const openNewsDialog = (): void => {
news.value?.showDialog()
}

//子组件暴露方法
defineExpose({
showDialog,
});

### 处理原生 DOM 事件时 + ts

//input标签

const input = ref<HTMLElement | null>(null);
//获取焦点
(input.value as HTMLInputElement).focus();

### ts结合prop使用（父传子）


注意：传递给 `defineProps` 的泛型参数本身**不能**是一个导入的类型：

//vue3+js的写法
const props = defineProps({
id:{
type:Number,
default:0
}
arr{
type:Array
default:()=>[]
}
})
//vue3+ts写法
interface PropType = {
id:number
arr:string[]
}
const props = defineProps()
//props 声明默认值 通过 withDefaults 编译器宏解决 推荐
const props = withDefaults(defineProps(), {
id: 1,
arr: () => [‘one’, ‘two’]
})
//下面的默认值写法暂时还处在实验性阶段，了解为主
const { id, arr=[] } = defineProps()

### ts结合emit使用（子传父）

//vue3+js的写法
const emits = defineEmits([‘change’, ‘update’])
//vue3+ts写法
const emits = defineEmits<{
(e:‘change’):void,
(e:‘update’,value:string):void
}>()

### ts+computed


`computed()` 会自动从其计算函数的返回值上推导出类型：

const count = ref(0)
// 推导得到的类型：ComputedRef
const double = computed(() => count.value * 2)
// => TS Error: Property ‘split’ does not exist on type ‘number’
const result = double.value.split(‘’)

//当然，也可以通过泛型参数显式指定类型：
const double = computed(() => {
// 若返回值不是 number 类型则会报错
})

### provide / inject + ts

import { provide, inject } from ‘vue’
import type { InjectionKey } from ‘vue’
//建议将key抽出去，方便复用
const key = Symbol() as InjectionKey

provide(key, ‘foo’) // 若提供的是非字符串值会导致错误

const foo = inject(key) // foo 的类型：string | undefined

### ts+pinia


在pinia里已经去掉了mutation


首先要安装全局依赖npm i pinia

//封装使用的pinia 在store/index.ts里
//导入defineStore
import { defineStore } from ‘pinia’
//导入接口
import { getBoxConfigApi } from ‘@/api/GuardBox’
//定义数据接口
export interface giftInfoType {
use_gift_id: number
count: number
level: number
gift: {
id: number
name: string
}
}
//定义数据接口
interface AllConfigType {
all_config: Partial<{
title_img: string
date_range: string[]
year_select: string[]
ttl: string
constellation: string
user_level: string
}>
gift_info: giftInfoType[]
}
//使用pinia
export const useStore = defineStore(‘main’, {
state: (): AllConfigType => ({
all_config: {},
gift_info: [],
}),

常用的JavaScript设计模式

• 单体模式

• 工厂模式

• 例模式

  

函数

• 函数的定义

• 局部变量和全局变量

• 返回值

• 匿名函数

• 自运行函数

• 闭包