Vue从入门到精通(第三方插件使用+Axios封装+Vuex状态管理+Vue3新特性)_vue使用第三方插件

Vue 面试题

1.Vue 双向绑定原理
2.描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？
3.你是如何理解 Vue 的响应式系统的?
4.虚拟 DOM 实现原理
5.既然 Vue 通过数据劫持可以精准探测数据变化,为什么还需要虚拟 DOM 进行 diff 检测差异?
6.Vue 中 key 值的作用？
7.Vue 的生命周期
8.Vue 组件间通信有哪些方式?
9.watch、methods 和 computed 的区别?
10.vue 中怎么重置 data?
11.组件中写 name 选项有什么作用？
12.vue-router 有哪些钩子函数?
13.route 和 router 的区别是什么？
14.说一下 Vue 和 React 的认识，做一个简单的对比
15.Vue 的 nextTick 的原理是什么？
16.Vuex 有哪几种属性?
17.vue 首屏加载优化
18.Vue 3.0 有没有过了解？
19.vue-cli 替我们做了哪些工作？

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

return{
 names:['路飞','索隆','乔巴']
}

},
methods:{
clickItemHandle(item){
console.log(item)
}
}

![在这里插入图片描述](https://img-blog.csdnimg.cn/ebd0be52c836432982eb47b5552b7d68.png#pic_center)


## 六、Vue表单输入绑定


##### v-model


你可以用v-model指令在表单input、textarea及select元素上创建双向数据绑定。它会根据控件类型自动选取正确的方法来更新元素。尽管有些神奇，但v-model本质上不过是语法糖。它负责监听用户的输入事件来更新数据，并在某种极端场景下进行一些特殊处理。

{{ useName }},{{ password }}

data(){
return{
useName:“”,
password:“”
}
},
methods:{
clickGetUserName(){
console.log(this.useName)
}
}

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/bbaf7725e011488699ed76b42769a424.png#pic_center)


##### 修饰符


**lazy：** 在默认情况下，v-model在每次input事件触发后将输入框的值与数据进行同步，你可以添加lazy修饰符，从而转为change事件之后进行同步=>或者或失去焦点时=>减少性能消耗

**.trim:**  
 如果要自动过滤用户输入的首尾空白符，可以给v-model添加trim修饰符

## 七、Vue组件基础


##### 单文件组件


vue单文件组件(又名==.vue文件==,缩写SFC)是一种特殊的文件格式，它允许将vue组件的 teplate => 模板、 script =>逻辑与 style => 样式封装在单个文件中

单文件组件

##### 加载组件


* 第一步:引入组件=>import HelloWorld from ‘./components/HelloWorld.vue’
* 第二步:挂载组件=>components: {HelloWorld}
* 第三步:显示组件=>  
 `<HelloWorld/>`


##### 组件的组织


通常一个应用以一颗嵌套的组件树的形式来组织  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/cdd103dddee744a7b63984383b84bcda.png#pic_center)


![在这里插入图片描述](https://img-blog.csdnimg.cn/574c1ded6454420da09656f9e3e43a2f.png#pic_center)


## 八、Vue中Props组件交互


##### Props


组件与组件之间是需要存在交互的，否则完全没关系，组件的意义就很小了  
 prop是你可以在组件上注册的一些自定义attribute  
 **从父组件传递**

data(){
return{
title:‘我是一个标题’,
age:20,
names:[‘路飞’,‘索隆’]
}
},

**从子组件接收**

{{ title }}

{{ age }}

• {{ item }}

export default{
name:‘pop1’,
props:{
title:{
type:String,
// 接收值的类型
default:‘’
// 默认值
},
age:{
type:Number,
default:‘’
},
names:{
type:Array,
// 数组和对象必须使用函数进行返回
default:function(){
return []
}
}
}
}

##### Props类型


Props传递参数其实是没有类型限制的



> 
> **温馨提示**  
>  数据类型为数组或者对象的时候，默认值是需要返回工厂模式（工厂模式=>函数模式）
> 
> 
> 

Props:{
title:String,
likes:Number,
isPublished:Boolean,
commentIds:Array,
author:Object,
callback:Function
}

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/5b08dda14082421ab2ac4b9e27d4e697.png#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/9df6aed436ec43269f7476760eb614df.png#pic_center)


## 九、Vue中自定义事件组件交互


自定义事件可以在组件中反向传递数据，prop可以将数据从父组件传递到子组件，那么反向如何操作呢，就可以利用自定义事件实现 $emit  
 **从子组件通过自定义事件向父组件传递数据**

<button @click=“sendClickHandle”>点击向父组件传递数据

data(){
return{
message:‘我是emits组件数据’
}
},
methods:{
sendClickHandle(){
// 参数1:字符串:理论上是随便的，但是需要具有意义
// 参数2:传递的数据
this.$emit(‘onEvent’,this.message)
}

**父组件接收数据**

<emits @onEvent=“getDateHandle” />

{{ message }}

data(){
return{
//先定义一个接收数据的字段
message:‘’,
}
},
methods:{
//自定义的事件
getDateHandle(data){
console.log(data)
this.message=data
}
}

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/2b4c84b747194904a704c3b63060fb64.png#pic_center)


## 十、Vue组件生命周期


每个组件在被创建时都要经历一系列的初始化1过程一一例如，需要设置数据监听，编译模板、将实例挂载到DOM并在数据变化时更新DOM等，同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会


**下方是vue官方生命周期图示=>所有红色框都输入vue的生命周期**  
 一定要记住，这也是面试和前端必须掌握的  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/4e46d03bd2144861b6ed42fcf82e371f.png#pic_center)  
 **为了方便记忆，我将它们进行了一下分类：**


* 创建时 :beforeCreate创建之前、created创建完成
* 渲染时: beforeMount渲染之前、mounted渲染完成
* 更新时: beforeUpdate更新之前、updated更新完成
* 卸载时: beforeUnmount卸载之前、unmounted卸载完成

export default {
data() {
return {
message: ‘’
}
},
// 创建时
beforeCreate() {
console.log(‘beforeCreate:组件创建之前’);
},
created() {
console.log(‘created:组件创建完成’);
},
// 渲染时
beforeMount() {
console.log(‘beforeMount:组件渲染之前’);
},
mounted() {
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
},
// 更新时
beforeUpdate(){
console.log(‘beforeUpdate:组件更新之前’);
},
updated(){
console.log(‘updated:组件更新完成’);
},
// 销毁时
beforeUnmount(){
console.log(‘beforeUnmount:组件卸载之前’);
//卸载之前，把消耗性能的处理都干掉
//比如定时器
},
unmounted(){
console.log(‘unmounted:组件卸载完成’);
}
}

**运行顺序**  
 组件创建完成就会执行这四个声明周期=>如控制台打印所示：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/c22e6378b2f442c994f6abc9e98519a5.png#pic_center)  
 页面发生变化执行的生命周期=>如控制台打印所示：  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/681b9a781ecc4a84a6551a9c7d7ec09d.png#pic_center)  
 组件销毁时执行的生命周期，这里就先不给大家测试了，等后续用到我会写在文档中，总而言之，这些生命周期大家日后根据自己项目的业务逻辑进行熟悉，这里先做一些简单的了解

// 销毁时
beforeUnmount(){
console.log(‘beforeUnmount:组件卸载之前’);
},
unmounted(){
console.log(‘unmounted:组件卸载完成’);
}

## 十一、Vue之引入第三方插件


关于大家在日常开发中有一些需求，可以在github上搜和vue官网推的



> 
> **温馨提示**  
>  [GitHub](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/acdf6fe0177341f8950f36fec51693fc.png#pic_center)  
 根据点星数进行筛选  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/fab1d8d272fe423198fb4d80bb23fdbb.png#pic_center)


另外一个就是vue官网整合的一些比较好的第三方



> 
> **温馨提示**  
>  [Vue2官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
>  注意一定要注意自己使用vue的版本，并不是每个都可以用的，一定要找版本对应的
> 
> 
> 


![在这里插入图片描述](https://img-blog.csdnimg.cn/b130312479314eceba5585b4a564f6c1.png#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/f5ef89b447524be4b0b59523598835ed.png#pic_center)


##### Swiper轮播图插件


![在这里插入图片描述](https://img-blog.csdnimg.cn/9521a1eeaa924331a88cfc12fee7e8ed.png#pic_center)



> 
> **温馨提示**  
>  [Swiper官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
>  [在vue中使用Swiper官方文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)
> 
> 
> 


* Swiper开源、免费、强大的触摸滑动插件
* Swiper是JavaScript打造的滑动特效插件，面向手机、平板、平板电脑等移动终端
* Swiper能实现触屏焦点图、触屏Tab切换、触屏轮播切换等常用效果

npm i swiper–save
//在终端安装
npm i swiper–save@8.16
//安装指定版本

图片1 图片2 图片3

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/d9429781d6274bf79b1668a60003d13a.png#pic_center)


##### Swiper添加指示器

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/b1264dba08fb407c992df18059fadc88.png#pic_center)


## 十二、Axios网络请求


☞[Axios官方API](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
 ☞[看云–Axios文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
 Axios是一个基于Promise的网络请求库


##### Axios安装


Axios的应用是需要单独安装的

npm install --save axios

##### Axios引入


组件中引入:

import axios from “axios”

##### Axios网络请求基本实例


###### get请求

<p>{{ chengpin.title }}</p>

import axios from ‘axios’
// 引入axios
export default{
name:‘axiosob’,
mounted(){
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
// get请求方式
axios({
method:‘get’,
// 请求方式
url:‘http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php’
// 请求地址
}).then(res=>{
console.log(res.data)
this.chengpin=res.data.chengpinDetails[0]
// 取数据
})
},
data(){
return{
chengpin:{}
//用来接受请求的数据
}
}
}

###### get请求快捷方案

axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res=>{
  console.log(res.data)
  this.chengpin=res.data.chengpinDetails[0]
  // 取数据
})

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/510fd04b36a742cd92abfda13f19c42a.png#pic_center)


###### post请求

import axios from ‘axios’
// 引入axios
export default{
name:‘axiosob’,
mounted(){
console.log(‘mounted:组件渲染完成’);
//把网络请求放到这里
// post请求方式
axios({
method:‘post’,
// 请求方式
url:‘http://iwenwiki.com/api/blueberrypai/login.php’,
// 请求地址
data:{
user_id:‘iwen@qq.com’,
password:‘iwen123’,
verification_code:‘crfvw’
}
// data是向后端接口传递的数据,可以数据实际工作中一定要根据后端给的文档规范传
}).then(res=>{
// 取数据
console.log(res.data)
})
},
data(){
return{

}

}
}

**但是遇到了一个问题**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/747af22447394a0d9019f54ee9c7c04e.png#pic_center)


post请求向后端传递数据时，可能会遇到格式的问题，转字符串可以用以下第三方插件,可能已经过时了，这种第三方有很多，像qs等等



> 
> **温馨提示**  
>  post请求参数需要额外处理的
> 
> 
> 1. 转依赖：npm install --save querystring
> 2. 转换参数格式：querystring.stringify({})
> 
> 
> 

npm install --save querystring

安装完成，在组件中引用

import querystring from ‘querystring’

使用querystring

// post请求方式
axios({
  method:'post',
  // 请求方式
  url:'http://iwenwiki.com/api/blueberrypai/login.php',
  // 请求地址
  data:querystring.stringify({
    user\_id:'iwen@qq.com',
    password:'iwen123',
    verification\_code:'crfvw'
  })
  // data是向后端接口传递的数据,可以数据实际工作中一定要根据后端给的文档规范传
}).then(res=>{
  // 取数据
  console.log(res.data)
})

使用后这样就没问题了


**例子**![在这里插入图片描述](https://img-blog.csdnimg.cn/7e9932807a4541dba7a786bbaa041e5e.png#pic_center)


###### post请求快捷方案

axios.post('http://iwenwiki.com/api/blueberrypai/login.php',querystring.stringify({
    user\_id: 'iwen@qq.com',
    password: 'iwen123',
    verification\_code: 'crfvw'
  })).then(res=>{
    console.log(res.data)
  })

},

##### 全局引用axios:


在main.js主入口文件引入

import { createApp } from ‘vue’
import App from ‘./App.vue’
import ‘./registerServiceWorker’
import axios from ‘axios’
// 全局引入axios

const app=createApp(App)
app.config.globalProperties.$axios = axios
//axios挂载到全局
app.mount(‘#app’)

在组件中使用就要变一下，例如

this.$axios.get('http://iwenwiki.com/api/blueberrypai/getChengpinDetails.php').then(res => {
  console.log(res.data)
  this.chengpin = res.data.chengpinDetails[0]
  // 取数据
})

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/a209362b1d714424a774608107e2d667.png#pic_center)


## 十三、Axios网络请求封装


☞[Axios官方API](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
 ☞[看云–Axios文档](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
 在日常开发过程中，一个项目中的请求会很多，此时一般采取的方案是网络请求封装起来


##### request.js封装Axios网络请求代码


在src目录下创建文件夹utils，并创建文件request.js，用来存储网络请求对象axios

import axios from “axios”;
// 引入axios
import querystring from “querystring”;
// 引入querystring

const errorHandle = (status, info) => {
// errorHandle错误函数
switch (status) {
case 400:
console.log(“400–语义错误”);
break;
case 401:
console.log(“401–服务器认证失败”);
break;
case 403:
console.log(“403–服务器拒绝访问”);
break;
case 404:
console.log(“404–地址错误”);
break;
case 500:
console.log(“500–服务器遇到意外”);
break;
case 502:
console.log(“502–服务器无响应”);
break;
default:
console.log(info);
break;
}
};

const instance = axios.create({
// 网络请求的公共配置
timeout: 5000,
// 请求超时时间最长5秒
});

// 这里最常用的=>拦截器
// 发送数据之前
instance.interceptors.request.use(
(config) => {
// config=>发送数据成功的函数
if (config.method === “post”) {
config.data = querystring.stringify(config.data);
// 格式化post传递参数的格式
}
// config:包含着网络请求的所有信息
return config;
},
(error) => {
// error=>发送数据失败的函数
return Promise.reject(error);
// 把失败的信息返回出去
}
);

// 获取之前
instance.interceptors.response.use(
(response) => {
// response=>获取成功的函数
return response.status === 200
? Promise.resolve(response)
: Promise.reject(response);
// response.status=>状态码
},
(error) => {
// error=>获取数据失败的函数,错误的处理才是需要关注的
const { response } = error;
// response这里指错误的信息
errorHandle(response.status,response.info)
}
);
export default instance;

##### path.js封装请求公共路径和api接口路径


在src目录下创建文件夹api，并创建文件==path.js(或base.js)用来设置路径

const base={
// base把所有的路径都放在这里
baseUrl:‘http://iwenwiki.com’,
// baseUrl=>公共路径
chengpin:‘/api/blueberrypai/getChengpinDetails.php’
// chengpin成品地址
}
export default base

##### index.js封装调接口api方法


在src目录下创建文件夹api，并创建文件index.js调接口的文件

// 把所有网络请求的方法都放在这个文件
import axios from “…/utils/request”
// 引入封装好的request文件
import path from’./path’
// 引入path路径文件
const api={
// 成品详情接口
getChengpin(){
return axios.get(path.baseUrl+path.chengpin)
}
}
export default api

##### 在组件中使用封装好的方法

import api from ‘…/api/index’
// 引入调接口文件
export default {
name: ‘axiosob’,
mounted() {
//使用封装好的方法
api.getChengpin().then(res=>{
console.log(res.data)
})
},
data() {
return {
}
}
}

**例子**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/7a93135cddba4a148f4f9a5cbdf9f548.png#pic_center)


## 十五、网络请求跨域解决方案


##### JS采取的是同源策略



> 
> 同源策略是游览器的一项安全策略，游览器只允许js代码请求和当前服务器域名，端口，协议相同的数据接口上的数据，这就是同源策略。  
>  也就是说，当协议、域名、端口任意一个不同时，都会产生跨域问题，所以又应该如何解决跨域问题呢
> 
> 
> 


##### 跨域错误提示信息


下方是一个标准的跨域错误  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/763b99a7a9934c8199f4cb8941324a1e.png#pic_center)


![在这里插入图片描述](https://img-blog.csdnimg.cn/1a8f1de9e90d49158308a88a55162f47.png#pic_center)


##### 目前主流的跨域解决方案有俩种


* 后台解决:cors
* 前端解决proxy


在vue.config.js文件下配置

const { defineConfig } = require(‘@vue/cli-service’)
module.exports = defineConfig({
transpileDependencies: true,
// 下列是解决跨域问题
devServer:{
proxy:{
‘/api’:{
target:‘http://iwenwiki.com/’,
// target产生跨域的地址
changeOrigin:true
}
}
}
})

> 
> **温馨提示**  
>  解决完跨域配置之后，要记得重启服务器才行哦！
> 
> 
> 


这样就可以取到数据了  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/513af2a47c604dd9b91516b481ff1205.png#pic_center)


## 十六、Vue引入路由配置


在vue中，我们可以通过vue-router路由管理页面之间的关系  
 Vue Router是Vue.js的官方路由。它与Vue.js核心深度集成，让Vue.js构建单页面应用变得轻而易举


[Vue-Router官网](https://bbs.csdn.net/forums/4304bb5a486d4c3ab8389e65ecb71ac0)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/11ad61be3e9a41dba1acca9a70a73f54.png#pic_center)  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/548e9661420246669fed027462287ec8.png#pic_center)


##### Vue中引入路由


##### 第一步：安装路由

npm install --save vue-router

##### 第二步:配置独立的路由文件


src=>views文件夹=>放一些组件


* HomeView组件

HomeView组件

* About组件

About组件

* index配置路由文件


src=>router路由文件夹=>index文件

// 路由配置文件
//1.引入路由
import { createRouter, createWebHashHistory,createWebHistory } from “vue-router”;
// 2.引入页面组件
import HomeView from “…/views/HomeView.vue”;
import About from “…/views/About.vue”;
// 页面配置
const routes = [
{
path: “/”,
// path访问路径
name: “Home”,
component: HomeView,
},
{
path: “/about”,
name: “About”,
component: About,
},
];

// 配置信息中需要页面的相关配置
const router = createRouter({
// 配置路由
/**
* createWebHashHistory
* http://localhost:8081/#/
* http://localhost:8081/#/about
* 原理：a标签的锚点链接
*/
/**
* createWebHistory
* http://localhost:8081/
* http://localhost:8081/about
* 此种方式需要后台配合做重定向，否则会出现404问题
* 原理：h5 pushState()
*/
history: createWebHashHistory(),
// history访问方式
routes,
});
export default router;

##### 第三步:引入路由到项目


在主入口文件main.js使用以下

import { createApp } from ‘vue’
import App from ‘./App.vue’
import ‘./registerServiceWorker’
import router from ‘./router’
// 引入配置好的路由文件
createApp(App).use(router).mount(‘#app’)
// .use(router)进行使用

##### 第四步:指定路由显示入口router-view


在页面中使用=>App.vue

##### 第五步:指定路由跳转

首页 关于

**效果**  
 ![在这里插入图片描述](https://img-blog.csdnimg.cn/38ae527468c54470b488d9b4a9df5855.png#pic_center)


## 十七、Vue路由传递参数


页面跳转过程中，是可以携带参数的，这也是很常见的业务  
 例如:在一个列表页，点击进入查看每个列表项的详情


##### 第一步:配置路由(router文件下index.js指定参数key)

import { createRouter, createWebHashHistory } from ‘vue-router’
import HomeView from ‘…/views/HomeView.vue’

const routes = [
{
path: ‘/’,
name: ‘home’,
component: HomeView
},
{
path: ‘/about’,
name: ‘about’,
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: “about” */ ‘…/views/AboutView.vue’)
},
{
path:‘/news’,
name:‘news’,
// 新闻列表页
component:()=>import(‘…/views/news.vue’)
},
{
path:‘/newsDetails/:name’,
// 指定参数key
name:‘newsDetails’,
// 新闻详情页
component:()=>import(‘…/views/newsDetails.vue’)
}
]

const router = createRouter({
history: createWebHashHistory(),
routes
})

export default router

### 刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

* **前端字节跳动真题解析**  

  ![](https://img-blog.csdnimg.cn/img_convert/8d27500df7b25342f252bca635ca0ab3.png)

* **【269页】前端大厂面试题宝典**  

  ![](https://img-blog.csdnimg.cn/img_convert/eac3322374bd31596de9bf548f6ce47f.png)


最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。


    name: 'home',
    component: HomeView
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/\* webpackChunkName: "about" \*/ '../views/AboutView.vue')
  },
  {
    path:'/news',
    name:'news',
    // 新闻列表页
    component:()=>import('../views/news.vue')
  },
  {
    path:'/newsDetails/:name',
    // 指定参数key
    name:'newsDetails',
    // 新闻详情页
    component:()=>import('../views/newsDetails.vue')
  }
]

const router = createRouter({
  history: createWebHashHistory(),
  routes
})

export default router

刷面试题

刷题的重要性，不用多说。对于应届生或工作年限不长的人来说，刷面试题一方面能够尽可能地快速自己对某个技术点的理解，另一方面在面试时，有一定几率被问到相同或相似题，另外或多或少也能够为自己面试增加一些自信心，可见适当的刷题是很有必要的。

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

• 前端字节跳动真题解析

  

• 【269页】前端大厂面试题宝典

  

最后平时要进行自我分析与评价，做好职业规划，不断摸索，提高自己的编程能力和抽象思维能力。大厂面试远没有我们想的那么困难，摆好心态，做好准备，你也可以的。