一、基础知识补充
1、思考在login-account.vue文件中export default defineComponent({}) ，导出的是对象{} ，如果在外部通过ref拿到还是对象{}吗？（这个很重要，但是可能要学完回顾源码的时候才能理解了）
image.png
2、type关键字是JavaScript中的还是TypeScript中的？有什么用？
- 【type】 属于TypeScript中的关键字
- 【作用】给类型起一个新名字，可以作用于原始值(基本类型)，联合类型，元组以及其他任何你需要手写的类型
- 【注意】起别名不会新建一个类型，只是创建了一个新名字来引用那个类型。给基本类别起名字通常没什么用。类型别名常用于联合类型。
type Second = number; // 基本类型
let timeInSecond: number = 10;
let time: Second = 10; // time的类型其实就是number类型
type userOjb = {name:string} // 对象
type getName = ()=>string // 函数
type data = [number,string] // 元组
type numOrFun = Second | getName // 联合类型
3、typeof 呢？
- 【typeof】是JavaScript中的操作符
- 【typeof操作符】返回一个字符串，表示操作数的类型。
- 它的返回值可能是 "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" 其中一种
4、理解TypeScript中的 extends 条件类型？
- 【注意】extends 运用在type 和class中时，完全是两种作用效果。
- 【extends】是条件类型是一种条件表达式进行类型的关系检测。
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关键字呢？
- 【类型推导 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作用】该类型的作用是获取构造函数类型的实例类型。
// 源码实现：
// 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;
// 复制代码看一下官方的例子：
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、如果在开发环境，网络请求出现了跨域访问怎么办？
- 可以通过本地代理绕过跨域问题
// 在 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、如果在生产环境，网络请求出现了跨域访问怎么办？
- 可以通过Nginx来解决
3、父组件如何调用子组件的方法？
- 通过给子组件添加ref调用，然后借助
<InstanceType<typeof LoginAccount>>保证代码安全
const accountRef = ref<InstanceType<typeof LoginAccount>>()
const handleLoginClick = () => {
accountRef.value?.loginAction(isKeepPassword.value)
}
4、vuex的内容是存储在内存中的，浏览器一刷新，vuex的数据就被清空了，怎么办？
- 写一个 actions，【loadLocalLogin】在页面初始化的时候调用一下
- 尽量保证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、未登录用户默认跳转到登陆页面要怎么做？
- 使用路由守卫
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被调用了${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()
