前端如何一步入门，迅速掌握核心技术栈？

hello，大家好

首先，目前每天起床刷一天boss直到招呼全部打完，眼看着时间一天天过去，却根本面试，更别谈offer！

那么如何才能让HR成功看到你并且让你去面试呢？

最重要的一点就是你的简历！！！为什么这么说呢，HR一天看的简历没有一千也又几百，那么你该如何脱颖而出，让HR注意到？不会写简历或者有问题可以【点击此处】我帮你

no1.首先学历很重要，如果学历只是普通大学或者专科的话，那么基本也不会看你后面的内容，当然是中厂或者大厂，小厂的话还是可以的。
no2.然后最重要的就是你的项目或者说是工作经验，如何精简的写出你的项目经历并且体现自己负责的区域，注意：这里一定要务实，如果夸大一点，就可能在面试中涉及到你不会的地方，比如说，你主要做react，他可能会问你vue等。
no3.工作阅历，我知道目前很多前端从学校出来根本找不到工作，更别谈工作经验，这就分为两部分，第一在学校学习优秀，可以直接入大厂，另一个部分就是正常毕业，找不到工作，然后去培训，然后依然找不到工作，为什么？因为简历写得太假太烂，包装出来的一些项目都不用细看，看项目名就知道你从哪里来的，那么面对这种情况怎么解决?很遗憾，无解，除了学到让大厂或者中厂都觉得你不错，是个人才的时候你就有机会了。人生嘛，学无止境！

那么面试中除了基本自我介绍，还有什么？

1. 项目经历
2. 基础掌握
3. 未来规划
4. 大量的面试题（根据你的项目经历提问，如果答得不错可能会超纲一些）
5. 手写（相当恐怖，劝各位基础要学好，没事摆脱电脑，可以尝试手写一些，对自己也无害）
6. 心理素质（这方面可能有些人也很无奈，建议模拟或者找几个面试，别管结果，我只是来练承认能力的）

项目经历这个可以在github上找些项目，不会就练，不懂就问！

基础就是面试题还有一些技术方面的应用！

未来规划要提前准备，基本也要侃侃而谈

面试题在面试前要经常刷，重复刷，没有或者缺的可以【点击此处】分享给你

手写没别的说，多练，类似随写一样，没事准备几张纸，写一下

以上这些希望可以帮助各位找到一份适合自己的工作，摆脱精神内耗，加油！！！！

面试题部分附上（基础-进阶）

1.vue篇

说说vue动态权限绑定渲染列表（权限列表渲染）

1. 首先请求服务器,获取当前用户的权限数据,比如请求 this.$http.get("rights/list");

2. 获取到权限数据之后,在列表中使用v-if v-if-else的组合来展示不同的内容

Vue用的哪种设计模式

属于发布订阅模式,在vue中使用observer和definereactive两个方法的结合对数据进行递归劫持,然后通过

watch这个类来对属性进行订阅,Dep类用于解耦合,当数据变更的时候先触发数据的set方法,然后调用

Dep.notiify通知视图更新

说说vue操作真实dom性能瓶颈

vue性能瓶颈的几种情况

1. 一次渲染大量的数据的时候,存在大量数据并且都是复杂类型的时候,会导致vue对数据的劫持时间

和渲染时间变长, js 连续执行时间过长，会导致页面长时间无法交互，而且渲染时间太慢，用户一

次交互反馈的时间过长。

优化方案:可以使用 requestAnimation 这个方法,将数据进行分割,分批次渲染,减少了 js 的

连续运行时间，并且加快了渲染时间，利用加长总运行时间换取了渲染时间，用户既能快速

得到反馈，而且不会因为过长时间的 js 运行而无法与页面交互。

2. 当页面中存在大量数据,只是修改了一小部分导致页面也会导致页面卡顿,因为vue的更新以组件为

粒度进行更新的，只要修改了当前组件中所使用的数据，组件就会整个去进行更新,造成大量的时

间浪费

优化方案:将不同的模块划分成不同的组件,这样有效降低虚拟dom的diff运算时间过长的问题,

比如将大量数据的模块单独放一个组件,其它放一个组件,由于vue是以组件为粒度更新,修改

其它组件的情况下不会导致table的重新diff,提升页面响应速度高达几百倍

3. 动态插槽作用域或者静态插槽的更新

使用插槽作用域来替换这两种操作方式,一样能提升性能,因为使用 插槽作用域 之后,插槽内容

会被封装到一个函数中,被子组件渲染,而不是在父组件

Vue中如何获取dom、操作dom、更新dom

如何获取dom？在Vue中提供了一种特别的方式来获取dom，即给dom加上个ref属性，那么就可以通过

this.$refs.名字来获取到该dom元素。

如何操作dom、更新dom？通过refs.名字就可以拿到对应的真实dom，然后就可以用原生JS进行操作和

更新。当然vue框架本身就是不需要dom操作的，通过修改相应的数据并再配合指令、模板语法就可以轻

松的操作和更新dom。

Vue 的双向数据绑定原理是什么

在Vue2.x中，双向数据绑定是通过 数据劫持 结合 发布订阅模式的方式来实现的，也就是说数据和视图同

步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。核心：关于VUE双向数据绑定，

其核心是 Object.defineProperty()方法。

Vue3.x则是用ES6的语法Proxy对象来实现的。

Object.defineProperty()的缺点：

1. 只能监听对象(Object)，不能监听数组的变化，无法触发push, pop, shift, unshift,splice, sort,

reverse。

2. 必须遍历对象的每个属性

3. 只能劫持当前对象属性，如果想深度劫持，必须深层遍历嵌套的对象。

Proxy的优点：

1. Proxy 可以直接监听对象而非属性。

2. Proxy 可以直接监听数组的变化。

3. Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是

Object.defineProperty 不具备的。

4. Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对

象属性直接修改。

5. Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利。

谈谈Vue的token存储

在前后端完全分离的情况下，Vue项目中实现token验证大致思路如下：

1、第一次登录的时候，前端调后端的登陆接口，发送用户名和密码

2、后端收到请求，验证用户名和密码，验证成功，就给前端返回一个token

3、前端拿到token，将token存储到localStorage和vuex中，并跳转路由页面

4、前端每次跳转路由，就判断 localStroage 中有无 token ，没有就跳转到登录页面，有则跳转到对应路

由页面

5、每次调后端接口，都要在请求头中加token

6、后端判断请求头中有无token，有token，就拿到token并验证token，验证成功就返回数据，验证失败

（例如：token过期）就返回401，请求头中没有token也返回401

7、如果前端拿到状态码为401，就清除token信息并跳转到登录页面

知道nextTick的作用吗，谈谈对它的理解，是什么，怎么用

当你设置 vm.message = 'new message'，该组件不会立即重新渲染。当刷新队列时，组件会在下一个事件

循环“tick”中更新。多数情况我们不需要关心这个过程，但是如果你想基于更新后的 DOM 状态来做点什

么，这就可能会有些棘手。虽然 Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触

DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后

立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。例如：

说说vue中Key值的作用

关于这个可以的key的作用 首先表明 key 不是一定要有的 不写可以代码也可以跑 但是建议加上
然后指出可以用的地方 key在v-for循环可以用用 在表单元素中也可以用key 减少
缓存
一般说key 只要说配合v-for的使用
key是为Vue中的vnode标记的唯一id,通过这个key,我们的diff操作可以更准确、更快速
diff算法的过程中,先会进行新旧节点的首尾交叉对比,当无法匹配的时候会用新节点的key与旧节点进行比对,然后超
出差异能讲清楚diff算法就继续讲
diff程可以概括为：oldCh和newCh各有两个头尾的变量StartIdx和EndIdx，它们的2个变量相互比较，一共有4种
比较方式。如果4种比较都没匹配，如果设置了key，就会用key进行比较，在比较的过程中，变量会往中间靠，一旦
StartIdx>EndIdx表明oldCh和newCh至少有一个已经遍历完了，就会结束比较,这四种比较方式就是首、尾、旧尾
新头、旧头新尾.
准确: 如果不加key,那么vue会选择复用节点(Vue的就地更新策略),导致之前节点的状态被保留下来,会产生一系列
的bug. 快速: key的唯一性可以被Map数据结构充分利用,相比于遍历查找的时间复杂度O(n),Map的时间复杂度仅
仅为O(1)
讲完以后 还要补充一点自己的看法
建议使用主键比如id

2.react

说说React中onClick绑定后的工作原理

1. 首先react有自己的事件系统,也是遵循w3c的,这个事件系统的名称叫做合成事件(SyntheticEvent),而

其自定义事件系统的动机主要包含以下几个方面

抹平不同浏览器之间的兼容性差异。最主要的动机。

件合成既可以处理兼容性问题

提供一个抽象的跨平台事件机制

可以做更多优化

可以干预事件的分发

2. 当给组件(元素)绑定 onClick 事件之后

1. react会对事件先进行注册,将事件统一注册到 document 上

2. 根据组件 唯一的标识key 来对事件函数进行存储

3. 统一的指定 dispatchEvent 回调函数

4. 储存事件回调: react会将click 这个事件统一存到一个对象中,回调函数的存储采用键值对

（

key/value）的方式存储在对象中，key 是组件的唯一标识 id，value 对应的就是事件的回

调函数,通过组件的key就能回调到相应的函数了

说说react里面bind与箭头函数

1. bind 由于在类中,采用的是 严格模式 ,所以事件回调的时候 会丢失this指向,指向undefined ,需要

使用bind来给函数绑定上当前实例的this指向

2. 箭头函数 的this指向上下文,所以永久能拿到当前组件实例的 this 指向,我们可以完美的使用箭头

函数来替代传统事件处理函数的回调

说说react中的性能优化

性能优化分为2个方面

1. 使用shouldComponentUpdate来对state和props进行对比,如果两次的结果一直,那么就return false

2. 使用纯净组件,pureComponent

高阶组件和高阶函数是什么

1. 高阶函数:函数接收一个函数作为参数,或者将函数作为返回值的函数就是高阶函数 map some every

filter reduce find forEach等等都属于高阶函数

2. 高阶组价:接受一个组件,返回一个新组建的组件就是高阶组件,本质上和高阶函数的意思一样

3. 高阶组件是用来复用react代码的一种方式

setState和repalceState的区别

setState 是修改其中的部分状态，相当于 Object. assign，只是覆盖，不会减少原来的状态； replaceState

是完全替换原来的状态，相当于赋值，将原来的 state 替换为另一个对象，如果新状态属性减少，那么

state 中就没有这个状态了

redux中核心组件有哪些，reducer的作用

redux 三大核心

action action理解为动作，action的值一般为一个对象，格式如 { type: "", data: "" }，type是必须要

的，因为reducer处理数据的时候要根据不同的type来进行不同的操作

reducer reducer是初始化以及处理派发的action的纯函数

store store是一个仓库，用来存储数据，它可以获取数据，也可以派发数据，还能监听到数据的变

化

reducer的作用

接收旧的 state 和 action，返回新的 state

什么是受控组件

受控组件就是可以被 react 状态控制的组件

在 react 中，Input textarea 等组件默认是非受控组件（输入框内部的值是用户控制，和React无关）。但

是也可以转化成受控组件，就是通过 onChange 事件获取当前输入内容，将当前输入内容作为 value 传

入，此时就成为受控组件。

hooks+context和redux你是怎么选择的，都在什么场景下使用

如果项目体量较小，只是需要一个公共的store存储state，而不讲究使用action来管理state，那context完

全可以胜任。反之，则是redux的优点。使用场景:

如果你在组件间传递的数据逻辑比较复杂，可以使用redux；

如果组件层级不多，可以使用props；

如果层级较深，数据逻辑简单，可以使用context。

usememo在react中怎么使用

返回一个 memoized 值。

把“创建”函数和依赖项数组作为参数传入 useMemo，它仅会在某个依赖项改变时才重新计算 memoized

值。这种优化有助于避免在每次渲染时都进行高开销的计算。

传入 useMemo 的函数会在渲染期间执行。请不要在这个函数内部执行与渲染无关的操作，诸如副作用这

类的操作属于 useEffect 的适用范畴，而不是 useMemo。

如果没有提供依赖项数组，useMemo 在每次渲染时都会计算新的值。

你可以把 useMemo 作为性能优化的手段，但不要把它当成语义上的保证。将来，React 可能会选择“遗

忘”以前的一些 memoized 值，并在下次渲染时重新计算它们，比如为离屏组件释放内存。先编写在没有

useMemo 的情况下也可以执行的代码 —— 之后再在你的代码中添加 useMemo，以达到优化性能的目

的。

React Hooks各种函数介绍

useState:

useState 是用于声明一个状态变量的，用于为函数组件引入状态.

useState 只接收一个参数，这个参数可以是数字、字符串、对象等任意值，用于初始化声明的状态

变量。也可以是一个返回初始值的函数，最好是函数，可在渲染时减少不必要的计算。

返回一个长度为2的读写数组，数组的第一项是定义的状态变量本身，第二项是一个用来更新该状

态变量的函数，约定是 set 前缀加上状态的变量名.

useState Hook 中返回的 setState 并不会帮我们自动合并对象状态的属性;

setState 中接收的对象参数如果地址没变的话会被 React 认为没有改变，因此不会引起视图的更新

useReducer:

useReducer 是 useState 的升级版。在 useState 中返回的写接口中，我们只能传递最终的结果，在

setN 的内部也只是简单的赋值操作。

创建初始状态值initialState,

创建包含所有操作的 reducer(state, action) 函数，每种操作类型均返回新的 state 值

根据 initialState 和 reducer 使用 const [state, dispatch] = useReducer(reducer, initialState) 得到读写

API

调用写接口，传递的参数均挂在 action 对象上

useContext:

context 是上下文的意思，上下文是局部的全局变量这个局部的范围由开发者自己指

useEffect:

effect 是副作用的意思，对环境的改变就是副作用。副作用是函数式编程里的一个概念

在 React 中，useEffect 就是在每次 render 后执行的操作，相当于 afterRender， 接收的第一个参数

是回调函数，第二个参数是回调时机。可用在函数组件中模拟生命周期。

如果同时出现多个 useEffect ，会按出现顺序依次执行

useLayoutEffect

useEffect 总是在浏览器渲染完视图过后才执行，如果 useEffect 里面的回调函数有对 DOM 视图的操

作，则会出现一开始是初始化的视图，后来执行了 useEffect 里的回调后立马改变了视图的某一部

分，会出现一个闪烁的状态。

为了避免这种闪烁，可以将副作用的回调函数提前到浏览器渲染视图的前面执行，当还没有将 DOM

挂载到页面显示前执行 Effect 中对 DOM 进行操作的回调函数，则在浏览器渲染到页面后不会出现

闪烁的状态。layout 是视图的意思，useLayoutEffect 就是在视图显示出来前执行的副作用。

useEffect 和 useLayoutEffect 就是执行的时间点不同，useLayoutEffect 是在浏览器渲染前执行，

useEffect 是在浏览器渲染后执行。但二者都是在 render 函数执行过程中运行，useEffect 是在

render 完毕后执行，useLayoutEffect 是在 render 完毕前（视图还没渲染到浏览器页面上）执行。

因此 useLayoutEffect 总是在 useEffect 前执行。

一般情况下，如果 Effect 中的回调函数中涉及到 DOM 视图的改变，就应该用 useLayoutEffect，如

果没有，则用 useEffect。

useRef

useRef Hook 是用来定义一个在组件不断 render 时保持不变的变量。

组件每次 render 后都会返回一个虚拟 DOM，组件内对应的变量都只属于那个时刻的虚拟 DOM。

useRef Hook 就提供了创建贯穿整个虚拟 DOM 更新历史的属于这个组件的局部的全局变量。

为了确保每次 render 后使用 useRef 获得的变量都能是之前的同一个变量，只能使用引用做到，因

此，useRef 就将这个局部的全局变量的值存储到了一个对象中，属性名为：current

useRef 的 current 变化时不会自动 render

useRef 可以将创建的 Refs 对象通过 ref 属性的方式引用到 DOM 节点或者 React 实例。

useCallback

是将某个函数“放入到react底层原型链上，并返回该函数的索引”，而useMemo是将某个函数返回值

“放入到react底层原型链上，并返回该返回值的索引”。一个是针对函数，一个是针对函数返回值。

useImperativeHandle

useImperativeHandle可以让父组件获取并执行子组件内某些自定义函数(方法)。本质上其实是子组

件将自己内部的函数(方法)通过useImperativeHandle添加到父组件中useRef定义的对象中。

useMemo

useMemo可以将某些函数的计算结果(返回值)挂载到react底层原型链上，并返回该函数返回值的索

引。当组件重新渲染时，如果useMemo依赖的数据变量未发生变化，那么直接使用原型链上保存的

该函数计算结果，跳过本次无意义的重新计算，达到提高组件性能的目的。

React Component和Purecomponent区别

Component 没有直接实现 shouldComponentUpdate 这个方法；但是 PureComponent通过浅层的Porps 和

state 的对比，内部实现了这个生命周期函数。

PureComponent会跳过整个组件子树的props更新，要确保全部的子组件也是 pure 的形式。

Component 中需要手动执行的 shouldComponentUpdate 函数，在PureComponent中已经自动完成了（自

动浅对比）。

PureComponent不仅会影响本身，而且会影响子组件，所以PureComponent最好用在数据展示组件中

PureCoponent 如果是复杂数据类型，这里会造成错误的显示（

setState浅复制更新，但是界面不会重新

渲染）

hooks相对于class的优化

类组件缺点一：复杂且不容易理解的“this”

Hooks解决方式：函数组件和普通JS函数非常相似，在普通JS函数中定义的变量、方法都可以不使用

“this.”，而直接使用该变量或函数，因此你不再需要去关心“this”了。类组件缺点二：组件数据状态逻辑不能重用

Hooks解决方式：

通过自定义Hook，可以数据状态逻辑从组件中抽离出去，这样同一个Hook可以被多个组件使用，解决组

件数据状态逻辑并不能重用的问题。

类组件缺点三：组件之间传值过程复杂、缺点三：复杂场景下代码难以组织在一起

Hooks解决方式：

通过React内置的useState()函数，可以将不同数据分别从"this.state"中独立拆分出去。降低数据复杂度和

可维护性，同时解决类组件缺点三中“内部state数据只能是整体，无法被拆分更细”的问题。

通过React内置的useEffect()函数，将componentDidMount、componentDidUpdate、

componentWillUncount 3个生命周期函数通过Hook(钩子)关联成1个处理函数，解决事件订阅分散在多个

生命周期函数的问题。

hooks父组件怎么调用子组件的方法

父组件使用 useRef 创建一个 ref 传入 子组件

子组件需要使用 useImperativeHandle 暴露 ref 自定义的实例值给父组件。这个需要

用 forwardRef 包裹着。

最后

先写这些，还有很多全写下就不太现实了，希望能帮助到各位，如果有任何需要可以【点击此处】我随时都在！