2024年前端最全来吧，解锁Vue3全家桶+TS的正确姿势(1)，2024年最新mysql的索引面试

最新推荐文章于 2024-05-14 12:59:01 发布

2401_84619530

最新推荐文章于 2024-05-14 12:59:01 发布

阅读量441

点赞数 3

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84619530/article/details/138775758

版权

程序员专栏收录该内容

95 篇文章 0 订阅

订阅专栏

最后

正值招聘旺季，很多小伙伴都询问我有没有前端方面的面试题！

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

前端资料图.PNG

type Todo = {
  id: number,
  name: string,
  completed: boolean
}

export default defineComponent({
  const data = reactive({
    todoList: [] as Todo[]
  })
  const count = ref(0);
  console.log(count.value)
  return {
    …toRefs(data)
  }
})


#### 定义props


`props`需要使用`PropType`泛型来约束。


#### 定义methods


### vue-router


* `createRouter`创建`router`实例
* `router`的模式分为：
* `createWebHistory` -- history模式
* `createWebHashHistory` -- hash模式
* `routes`的约束类型是`RouteRecordRaw`

import { createRouter, createWebHistory, RouteRecordRaw } from ‘vue-router’;
import Home from ‘…/views/Home.vue’;
const routes: Array< RouteRecordRaw > = [
  {
    path: ‘/’,
    name: ‘Home’,
    component: Home,
  },
  {
    path: ‘/about’,
    name: ‘About’,
    component: () => import(/* webpackChunkName: “about” */ ‘…/views/About.vue’)
  }
];

const router = createRouter({
history: createWebHistory(process.env.BASE_URL),
routes
});

export default router;


#### 扩展路由额外属性


在实际项目开发中，常常会遇到这么一个场景，某一个路由是不需要渲染到侧边栏导航上的，此时我们可以给该路由添加一个hidden属性来实现。


在ts的强类型约束下，添加额外属性就会报错，那么我们就需要扩展`RouteRecordRaw`类型。

// 联合类型
type RouteConfig = RouteRecordRaw & {hidden?: boolean}; //hidden 是可选属性
const routes: Array = [
  {
    path: ‘/’,
    name: ‘Home’,
    component: Home,
    hidden: true,
    meta: {
      permission: true,
      icon: ‘’
    }
  }
];


#### 在setup中使用


需要导入`useRouter`创建一个`router`实例。


### vuex


#### 使用this.$store

import { createStore } from ‘vuex’;
export type State = {
count: number
}

export default createStore({
  state: {
    count: 0
  }
});


需要创建一个声明文件`vuex.d.ts`

// vuex.d.ts
import {ComponentCustomProperties} from ‘vue’;
import {Store} from ‘vuex’;
import {State} from ‘./store’
declare module ‘@vue/runtime-core’ {
    interface ComponentCustomProperties {
        $store: Store
    }
}


#### 在setup中使用


1. ```
定义InjecktionKey

在安装插件时传入key

3. ```
在使用useStore时传入

import { InjectionKey } from 'vue';
import { createStore, Store } from 'vuex';

export type State = {
  count: number
}
// 创建一个injectionKey
export const key: InjectionKey<Store<State>> = Symbol('key');

// main.ts
import store, { key } from './store';
app.use(store, key);

<script lang="ts">
import { useStore } from 'vuex';
import { key } from '@/store';
export default defineComponent({
  setup () {
    const store = useStore(key);
    const count = computed(() => store.state.count);
    return {
      count
    }
  }
})
</script>

模块

新增一个todo模块。导入的模块，需要是一个vuex中的interface Module的对象,接收两个泛型约束，第一个是该模块类型，第二个是根模块类型。

// modules/todo.ts
import { Module } from 'vuex';
import { State } from '../index.ts';

type Todo = {
  id: number,
  name: string,
  completed: boolean
}

const initialState = {
  todos: [] as Todo[]
};

export type TodoState = typeof initialState;

export default {
  namespaced: true,
  state: initialState,
  mutations: {
    addTodo (state, payload: Todo) {
      state.todos.push(payload);
    }
  }
} as Module<TodoState, State>; //Module<S, R> S 该模块类型 R根模块类型

// index.ts
export type State = {
  count: number,
  todo?: TodoState // 这里必须是可选，不然state会报错
}

export default createStore({
  state: {
    count: 0
  }
  modules: {
    todo
  }
});

使用：

setup () {
  console.log(store.state.todo?.todos);
}

elementPlus

yarn add element-plus

完整引入

import { createApp } from 'vue'
import ElementPlus from 'element-plus';import 'element-plus/lib/theme-chalk/index.css';import App from './App.vue';
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
const app = createApp(App)
app.use(ElementPlus, { size: 'small', zIndex: 3000, locale })
app.mount('#app')

按需加载

需要安装babel-plugin-component插件:

yarn add babel-plugin-component -D

// babel.config.js
plugins: [
    [收起
      'component',
      {
        libraryName: 'element-plus',
        styleLibraryName: 'theme-chalk'
      }
    ]
]

import 'element-plus/lib/theme-chalk/index.css';
import 'dayjs/locale/zh-cn';
import locale from 'element-plus/lib/locale';
import lang from 'element-plus/lib/locale/lang/zh-cn';
import {
  ElAside,
  ElButton,
  ElButtonGroup,
} from 'element-plus';

const components: any[] = [
  ElAside,
  ElButton,
  ElButtonGroup,
];

const plugins:any[] = [
  ElLoading,
  ElMessage,
  ElMessageBox,
  ElNotification
];

const element = (app: any):any => {
  // 国际化
  locale.use(lang);
  // 全局配置
  app.config.globalProperties.$ELEMENT = { size: 'small' };
  
  components.forEach(component => {
    app.component(component.name, component);
  });

  plugins.forEach(plugin => {
    app.use(plugin);
  });
};

export default element;

// main.ts
import element from './plugin/elemment'

const app = createApp(App);
element(app);

axios

axios的安装使用和vue2上没有什么大的区别，如果需要做一些扩展属性，还是需要声明一个新的类型。

type Config = AxiosRequestConfig & {successNotice? : boolean, errorNotice? : boolean}

import axios, { AxiosResponse, AxiosRequestConfig } from 'axios';
import { ElMessage } from 'element-plus';
const instance = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL || '',
  timeout: 120 * 1000,
  withCredentials: true
});

// 错误处理
const err = (error) => {
  if (error.message.includes('timeout')) {
    ElMessage({
      message: '请求超时，请刷新网页重试',


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

![html5](https://img-blog.csdnimg.cn/img_convert/f53354aae00d2193a89ae90a6ed12b32.webp?x-oss-process=image/format,png)

 if (error.message.includes('timeout')) {
    ElMessage({
      message: '请求超时，请刷新网页重试',


### 结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)**

[外链图片转存中...(img-E7Q98Lfg-1715536646246)]