一、基礎(chǔ)知識補充
1喳坠、思考在login-account.vue文件中export default defineComponent({}) 鞠评，導(dǎo)出的是對象{} ，如果在外部通過ref拿到還是對象{}嗎壕鹉？（這個很重要剃幌，但是可能要學(xué)完回顧源碼的時候才能理解了）
image.png
2、type關(guān)鍵字是JavaScript中的還是TypeScript中的晾浴？有什么用负乡？
- 【type】 屬于TypeScript中的關(guān)鍵字
- 【作用】給類型起一個新名字，可以作用于原始值(基本類型)脊凰，聯(lián)合類型抖棘，元組以及其他任何你需要手寫的類型
- 【注意】起別名不會新建一個類型，只是創(chuàng)建了一個新名字來引用那個類型狸涌。給基本類別起名字通常沒什么用切省。類型別名常用于聯(lián)合類型。
type Second = number; // 基本類型
let timeInSecond: number = 10;
let time: Second = 10; // time的類型其實就是number類型
type userOjb = {name:string} // 對象
type getName = ()=>string // 函數(shù)
type data = [number,string] // 元組
type numOrFun = Second | getName // 聯(lián)合類型
3帕胆、typeof 呢朝捆？
- 【typeof】是JavaScript中的操作符
- 【typeof操作符】返回一個字符串，表示操作數(shù)的類型懒豹。
- 它的返回值可能是 "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" 其中一種
4芙盘、理解TypeScript中的 extends 條件類型驯用？
- 【注意】extends 運用在type 和class中時，完全是兩種作用效果何陆。
- 【extends】是條件類型是一種條件表達式進行類型的關(guān)系檢測晨汹。
const num: number = 1; // 可被分配
const str: string = 2; // 不可被分配
- 而條件類型的判斷邏輯，和上面的的 ”可被分配“ 相同邏輯：
type A = 'x';
type B = 'x' | 'y';
type Y = A extends B ? true : false; // true
5贷盲、TypeScript中的infer關(guān)鍵字呢淘这？
- 【類型推導(dǎo) infer】是作為
extends條件類型的自語句使用，使用 infer 聲明一個類型變量巩剖，在條件類型判定為 true 時生效铝穷。
type ExtractArrayItemType<T> = T extends (infer U)[] ? U : T;
// 條件判斷都為 false，返回 T
type T1 = ExtractArrayItemType<string>; // string
type T2 = ExtractArrayItemType<() => number>; // () => number
type T4 = ExtractArrayItemType<{ a: string }>; // { a: string }
// 條件判斷為 true佳魔，返回 U
type T3 = ExtractArrayItemType<Date[]>; // Date
6曙聂、理解instanceType？在vue目前主要用在哪里鞠鲜？
- 【vue中的instanceType用法】父組件用ref獲取子組件時宁脊，通過 instanceType獲取子組件的類型
- 【instanceType作用】該類型的作用是獲取構(gòu)造函數(shù)類型的實例類型。
// 源碼實現(xiàn)：
// node_modules/typescript/lib/lib.es5.d.ts
type InstanceType<T extends new (...args: any[]) => any> = T extends new (...args: any[]) => infer R ? R : any;
// 復(fù)制代碼看一下官方的例子：
class C {
x = 0;
y = 0;
}
type T20 = InstanceType<typeof C>; // C
type T21 = InstanceType<any>; // any
type T22 = InstanceType<never>; // any
type T23 = InstanceType<string>; // Error
type T24 = InstanceType<Function>; // Error
二贤姆、項目代碼注意點
1榆苞、如果在開發(fā)環(huán)境，網(wǎng)絡(luò)請求出現(xiàn)了跨域訪問怎么辦霞捡？
- 可以通過本地代理繞過跨域問題
// 在 vue.config.js 文件中配置devServer
module.exports = {
// 1.配置方式一: CLI提供的屬性
outputDir: './build',
// publicPath: './',
devServer: {
proxy: {
'^/api': {
target: 'http://152.136.185.210:5000',
pathRewrite: {
'^/api': ''
},
changeOrigin: true
}
}
},
// 2.配置方式二: 和webpack屬性完全一致, 最后會進行合并
configureWebpack: {
resolve: {
alias: {
components: '@/components'
}
}
}
}
2坐漏、如果在生產(chǎn)環(huán)境，網(wǎng)絡(luò)請求出現(xiàn)了跨域訪問怎么辦碧信？
- 可以通過Nginx來解決
3赊琳、父組件如何調(diào)用子組件的方法？
- 通過給子組件添加ref調(diào)用砰碴，然后借助
<InstanceType<typeof LoginAccount>>保證代碼安全
const accountRef = ref<InstanceType<typeof LoginAccount>>()
const handleLoginClick = () => {
accountRef.value?.loginAction(isKeepPassword.value)
}
4躏筏、vuex的內(nèi)容是存儲在內(nèi)存中的，瀏覽器一刷新衣式，vuex的數(shù)據(jù)就被清空了寸士，怎么辦？
- 寫一個 actions碴卧，【loadLocalLogin】在頁面初始化的時候調(diào)用一下
- 盡量保證vuex中state的所有修改都源自mutation流程
// store/login/index.ts
loadLocalLogin({ commit }) {
const token = localCache.getCache('token')
if (token) {
commit('changeToken', token)
}
const userInfo = localCache.getCache('userInfo')
if (userInfo) {
commit('changeUserInfo', userInfo)
}
const userMenus = localCache.getCache('userMenus')
if (userMenus) {
commit('changeUserMenus', userMenus)
}
}
// store/index.ts
export function setupStore() {
store.dispatch('login/loadLocalLogin')
}
// main.ts
import store from './store'
import { setupStore } from './store'
const app = createApp(App)
setupStore()
app.mount('#app')
5弱卡、未登錄用戶默認跳轉(zhuǎn)到登陸頁面要怎么做？
- 使用路由守衛(wèi)
import { createRouter, createWebHistory } from 'vue-router'
import { RouteRecordRaw } from 'vue-router'
import localCache from '@/utils/cache'
const routes: RouteRecordRaw[] = [
{
path: '/',
redirect: 'main'
},
{
path: '/login',
component: () => import('../views/login/login.vue')
},
{
path: '/main',
component: () => import('../views/main/main.vue')
}
]
const router = createRouter({
routes,
history: createWebHistory()
})
router.beforeEach((to) => {
if (to.path !== '/login') {
const token = localCache.getCache('token')
if (!token) {
return '/login'
}
}
})
export default router
6住册、如何寫一個本地緩存管理util婶博？
// cache.ts
let counter = 0
class LocalCache {
constructor() {
console.log(`LocalCache被調(diào)用了${counter++}次`)
}
setCache(key: string, value: any) {
window.localStorage.setItem(key, JSON.stringify(value))
}
getCache(key: string) {
let value = window.localStorage.getItem(key) ?? ''
if (value) {
value = JSON.parse(value)
}
return value
}
deleteCache(key: string) {
window.localStorage.removeItem(key)
}
clearCache() {
window.localStorage.clear()
}
}
export default new LocalCache()
