JS 篇

闭包

定义：函数内部定义函数，内部函数持有外部函数参数

作用

读取函数内部的变量
让这些变量的值始终保持在内存中。不会再f1调用后被自动清除。
方便调用上下文的局部变量。利于代码封装。

副作用：内存管理，可能会内存溢出

原因：f1是f2的父函数，f2被赋给了一个全局变量，f2始终存在内存中，f2的存在依赖f1，因此f1也始终存在内存中，不会在调用结束

内存溢出的常见方式

递归调用缺乏退出条件
vue、react 中定时器和计时器未消除，习惯在生命周期销毁阶段去清空；
闭包使用过程中未及时销毁，fn=null 来清除变量的引用；
dom 操作完成后绑定事件未销毁；
dom 操作中的事件委托未销毁；

参考：https://blog.csdn.net/qappleh/article/details/80337630

防抖与节流

防抖是将多次执行变为最后一次执行；
节流是将多次执行变为每隔一段时间执行
实现函数节流我们主要有两种方法：时间戳和定时器
参考：https://www.cnblogs.com/momo798/p/9177767.html

请求的取消

$ajax 取消的ajax的关键是调用XHR对象的.abort()方法
axios axios.CancelToken api 调用
如何自己实现一个ajax请求（要点：步骤、状态、参数的处理、响应结果的处理、错误的处理）
参考：https://www.cnblogs.com/qing-5/p/11368009.html

WebSocket 与http

HTTP 协议通信只能由客户端发起，通信是单向的，如果需要持续通信，常规通过轮询的方式发起请求；效率低，占用通信；
WebSocket是双向通信；服务器可以主动向客户端推送信息，客户端也可以主动向服务器发送信息

其他特点包括：

建立在 TCP 协议之上，服务器端的实现比较容易。
与 HTTP 协议有着良好的兼容性。默认端口也是80和443，并且握手阶段采用 HTTP 协议，因此握手时不容易屏蔽，能通过各种 HTTP 代理服务器。
数据格式比较轻量，性能开销小，通信高效。
可以发送文本，也可以发送二进制数据。
没有同源限制，客户端可以与任意服务器通信。
协议标识符是ws（如果加密，则为wss），服务器网址就是 URL。

websocket的api与心跳机制（重要）

参考：https://www.jianshu.com/p/5297732db7f2

flash 即将过期，有什么代替方案？

WebRTC 技术的实现了解一下；
- 参考： https://segmentfault.com/a/1190000005864228

Function的命名区别

    var a=function(){ console.log(1) } 与 function  a () { console.log(2)} 的区别

var a=function 函数表达式，变量命名初始化在前，函数主体初始话在函数调用时才进行；所以必须在申明之后才能调用a()；
function a 函数申明，变量申明和函数主体初始话一开始就完成，所以可以在a 申明之前去调用；
当执行 a();输出的是1

JS类型判断的方法

typeof
instanceof
Object.prototype.toString.call()
constructor 判断（比较常用）
参考：https://www.jb51.net/article/190286.htm

Promise 的实现原理

参考：http://liubin.org/promises-book/

常见问题

状态 pedding、fulfilled、rejected 什么含义
promise 内部是如何捕获错误的（catch的实现原理）；
finnaly 的作用是什么（实现原理）
resolve 与 reject 的作用是什么；
多个 promise 链式调用中，如何执行( 什么情况会then,什么时候会catch )

    sendRequest('test1.html', '').then(function(data1) {
        console.log('第一次请求成功, 这是返回的数据:', data1);
        return sendRequest('test2.html', data1);
    }).then(function(data2) {
        console.log('第二次请求成功, 这是返回的数据:', data2);
        return sendRequest('test3.html', data2);
    }).then(function(data3) {
        console.log('第三次请求成功, 这是返回的数据:', data3);
    }).catch(function(error) {
        //用catch捕捉前面的错误
        console.log('sorry, 请求失败了, 这是失败信息:', error);
    });

参考： https://www.cnblogs.com/sweet-ice/p/10582925.html
promise.race()
参考 https://www.jianshu.com/p/af443ae22f37
promise.all()
参考： https://blog.csdn.net/weixin_36869329/article/details/82841374

async 函数

参考： https://es6.ruanyifeng.com/#docs/async

实现异步改为同步的方式有哪些

async await
Generator 与 yield* 实现
常用的callback 在异步中回调

ES6 新增特性有哪些

常见问题

var、let、const 的区别（涉及到变量提升、暂时性死区概念）
https://es6.ruanyifeng.com/#docs/let
原始数据类型和引用数据类型有哪些？
https://blog.csdn.net/yehuaner33/article/details/85179508
如何数组去重？
对象深拷贝与浅拷贝有哪些区别，及如何实现？
js中实现异步加载的方式有哪些？

https://www.zhangshengrong.com/p/noXQoplPaG/
require与import 的区别？

https://www.cnblogs.com/myfirstboke/p/10563597.html
Array 与Object 新增的方法；
Set 与Map 数据结构；
Symbol 数据结构；
Class 的基本语法

参考： https://es6.ruanyifeng.com/#docs/class
- extends 继承的实现
- super()与construction(){} 的作用；
- static 关键字的作用；

简述打开一个新页面时，浏览器如何实现页面渲染

从js脚本、dom树、样式表三个方面回答

HTTP 三次握手简述

参考：https://www.jianshu.com/p/3cdc08c0fd43

https 为什么是安全的（http与https对比着说）？

参考：https://blog.csdn.net/xiaoming100001/article/details/81109617

JS 继承与原型、原型链

this指向问题

bind,call,apply 3种方法的作用及区别
- 参考：https://blog.csdn.net/wyyandyou_6/article/details/81488103?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.channel_param

对象创建的方式有哪些，有什么区别（对象原型链问题）

第一种： 字面量
var Obj1 = {name:”o1”};
var Obj2 = new Object({name:”o2”});
// var a = {} 其实是 var a = new Object() 的语法糖
// var a = [] 其实是 var a = new Array() 的语法糖
//所以上面 Obj1 与 Obj2 的申明方式等价

第二种：构造函数
var M = function (name) { this.name = name };
var Obj3 = new M(“o3”) ;

第三种：Object.create（继承的原型对象）
var p = {name:”o4”}
var Obj4 = Object.create(p);

参考：https://blog.csdn.net/m0_37585915/article/details/80843945?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-3.channel_param

大体积文件上传（分片上传的实现）

参考：https://blog.csdn.net/u013611548/article/details/82850467?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-2.channel_param

敏捷开发模式（了解其概念）

参考：http://www.ruanyifeng.com/blog/2019/03/agile-development.html

CSS 篇

css 权重问题

!important>行内样式>id>class,伪类选择，属性选择器>>标签>继承》通配符
link>@important

css @import 与link 引入有什么不同，哪种方式更优？

参考链接：https://www.cnblogs.com/my--sunshine/p/6872224.html

less 与scss 的使用

常见问题

两种中变量如何定义？
如何实现样式的复用（混合）？

回流与重绘的概念

https://www.cnblogs.com/mdr86553/p/12048742.html

常见问题：display:none与visiable:hidden 的区别

布局

如何实现居中

flex布局居中；
transform + translate；
margin:0 auto;
display:table ,借助于表格定位；
calc 计算居中；
text-aligin：center；
高度与行高相同；

Css 中的BFC及消除方式

https://www.cnblogs.com/chen-cong/p/7862832.html

如何实现一个三角形？

http://caibaojian.com/css-border-triangle.html

如何实现响应式布局？

第三方库的布局实现，如bosstrap 12列布局，element 的24列布局；
@media 实现不同界面设备下的布局；
如何实现自适应布局
- 参考：https://www.cnblogs.com/yuanziwen/p/6926561.html

vm、rem、em 、px的区别

参考：https://www.cnblogs.com/anyw3c/p/anyw3ccc.html

在vue 移动端开发过程中，如何设置字体、文字为响应式

postcss-px-to-viewport 的配置
rem 的具体使用方式；
- 参考：https://www.jianshu.com/p/691a569f7fe1

VUE 篇

实现原理；

vue实现数据双向绑定主要是：采用数据劫持结合发布者-订阅者模式的方式，通过Objct.defineProperty（）来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应监听回调。当把一个普通 Javascript 对象传给 Vue 实例来作为它的 data 选项时，Vue 将遍历它的属性，用 Object.defineProperty 将它们转为 getter/setter。用户看不到 getter/setter，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。

参考：https://baijiahao.baidu.com/s?id=1614572521202569483&wfr=spider&for=pc

如何实现数据双向绑定，简述原理和具体实现方式？

参考：https://blog.csdn.net/yun_hou/article/details/86313212

vue的生命周期及先后顺序

created、watch、computed、mounted 的先后顺序（具体写案例测试）；
父子组件间 vue 的生命周期如何执行？

如何全局注册组件和过滤器？多个组件和过滤器如何注册？

//全局过滤器统一导出
conset fuction  filter1(){} 
conset fuction  filter2(){} 
conset fuction  filter3(){} 
export {filter1,filter2,filter3}
//统一导入
import * as filters from '@/common/filters' 
//循环生成过滤器
Object.keys(filters).forEach(key => {
    Vue.filter(key, filters[key])
})
//统一导入组件同理
import * as compontents from '@/common/compontents' 
//循环生成过滤器
Object.keys(compontents).forEach(key => {
    Vue.Compontent(key, compontents[key])
})

传参方式

父传子：props，ref 获取子组件实例、slot 插槽实现、$children 获取所有子组件实例
子传父：$emit 向外分发、.async 修改父组件实例，
兄弟之间（全局）：vuex 状态管理器、$bus 中间总线方式；
路由传参；
vue 根节点设置全局变量；
本地存储方式实现数据共享；
组件组合方式 : mixins 混合语法，extends 子组件实现构造、provide / inject （依赖注入）（参考 element-ui）；

页面缓存keep-alive 的实现

include and exclude 的作用，钩子函数 activated、deactivated 的作用；
如何实现 a、b、c 三个页面，a->b页面缓存，c->b页面不缓存；

如何实现组件的强制刷新功能;

v-if 设置false；在$nextTick(_=>更改状态变为true);
component 的is属性，动态改变挂载组件名称；
设置key值，vue通过检查key值变化了自动刷新页面；
调用foceUplate 的实例方法，强制刷新页面；

vue管理平台鉴权如何设置？

参考：https://www.cnblogs.com/zhengrunlin/p/8981017.html

菜单权限

1、常规系统设计分为菜单、角色、人员；
2、菜单和按钮分配给角色;角色分配给人员；
3、用户登录时获取角色对应的菜单树和按钮集合；通过遍历菜单树形成router树；
4、调用路由addrouters api 动态添加在路由对象中；用户菜单常规是按照路由表对应生成的；

按钮权限

通常后台返回的按钮是存在于菜单树下的；需要单独遍历成一个按钮权限code集合；
通过自定义指令的形式来控制按钮节点的生成与删除
import Vue from 'vue';
import store from '@/vuex/store';
//权限按钮指令
Vue.directive('has', {
    inserted: function(el, binding) {
        if(!store.state.permissionButton[binding.value]){
            el.parentNode && el.parentNode.removeChild(el);
        }
    }
})
//使用 add 权限码判断
<el-button v-has="'add'">新增<el-button/>

Token 的使用

一种前后台权限验证手段；通常在请求的header中进行添加；
当缺少或者过期后，请求会返回401状态码；需要重新获取token或者重新登录；
***特殊业务***
token过期后跳转至登录，重新授权获取登录和再回跳至之前过期页面

//asios Response响应拦截
switch (error.response.status) {
                case 401:
                    // 返回 401 清除token信息并跳转到登录页面
                    store.commit(types.LOGOUT);
                    router.replace({
                        path: 'login',
                        query: {redirect: router.currentRoute.fullPath}//保持页面地址
                    })
            }
//登录
methods:{
    login(){
        let redirect=decodeURIComponent(this.$router.query.redirect);
        if(redirect){
            this.$router.push(redirect);
            return 
        }
        this.$router.push('/login')
    }
}

Vue 语法忽略盲区（vue、vue-router、vuex、vue-cli、webpack）

watch 与computed 的区别?

watch 如何实现对对象的监听？
watch 中deep:true 的作用是什么？（案例测试）
watch 中immediate :true 的作用是什么？（案例测试）

如何在methods 中使用filter的方法？

参考：https://blog.csdn.net/qq_35430000/article/details/92795438

修饰符有哪些？

.async 修饰符的作用及实现原理；

指令有哪些以及如何实现自定义指令?

参考：https://cn.vuejs.org/v2/guide/custom-directive.html

on-clock 的使用方式；

<transition> 的使用

参考：https://cn.vuejs.org/v2/api/#transition

虚拟dom createElement（）与JSX 写法；

参考：https://cn.vuejs.org/v2/guide/render-function.html

vue-router 的使用

全局路由和组件路由分别有哪些？
命名路由的使用
- 参考：https://www.cnblogs.com/qdhxhz/p/9011797.html
如何实现组件的按需加载？

简述 vuex 的构成及各部分功能（state、action、getter、mutation、module、plugins（很少用到））

vuex 提供的Map方法有哪些？
vuex 在常规业务中处理哪些数据？
- 登录信息、baseCode（码表）、路由信息、菜单信息等全局状态；
如何实现数据的持久化（页面刷新，如何保持store仓库数据不变）？
- 利用localstorge 或者session 在浏览器中做缓存；
- 借助于vuex-persist 控件，实现store持久化；
- 参考：https://www.cnblogs.com/wang-sai-sai/p/11076833.html

你还了解哪些状态管理的解决方案

早期的flux;
react中官方推荐使用 redux；
vuex中官方推荐使用 vuex；
mobx，mobx-vue与mobx-react（mobx-*在react中使用较多,推荐深入学习下）；
Rematch（很少用到）
++自行百度搜索查看原理++

solt 语法的具体实现？

vue-router 前置钩子函数中next（）有哪些用法？

简述webpack 的实现原理（基本构成、流程概括）？

参考：https://www.jianshu.com/p/8dd5885bfb66

webpack 中plugin与loader 的区别？

参考：https://www.cnblogs.com/tangjiao/p/10429645.html

vue 中v-for 在遍历数组和对象时，循环参数（item、index、value、name、index）代表什么？

//data 
object: {
      title: 'How to do lists in Vue',
      author: 'Jane Doe',
      publishedAt: '2016-04-10'
    }
 items: [
      { message: 'Foo' },
      { message: 'Bar' }
    ]
//循环数组
<ul id="example-2">
  <li v-for="(item, index) in items">
    {{ parentMessage }} - {{ index }} - {{ item.message }}
  </li>
</ul>    
//循环对象
<div v-for="(value, name, index) in object">
  {{ index }}. {{ name }}: {{ value }}
</div>

v-for 中添加key的作用是什么？

为了给 Vue 一个提示，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素；
参考：https://cn.vuejs.org/v2/api/#key

v-if 与v-show 的区别及在哪些情况下使用？

参考：https://www.jianshu.com/p/7af8554d8f08

$set( )、$ nextTick( ) 的作用是什么？

vue3 与 vue2 相比有哪些改动？

原理及api的变化两方面阐述
- Object.defineProperty -----> Proxy;
- Data 、Method、 LifeCycle、 Computed、 Components
- 参数：https://www.jianshu.com/p/b1fb5d549fcd

Vue element-ui 键盘回车事件表单自动提交造成页面刷新问题（使用element-ui 有没实际的经验）

参考：https://weiku.co/article/297/

项目搭建做哪些工作？（结合实际来说）

需求了解、原型图、设计图；
vue-cli改造（环境配置、常用css、js等脚本文件编写）；
请求封装、路由设置、组件封装、服务部署（打包构建）；

前端面试概要（Vue开发）

前端面试概要（Vue开发）

JS 篇

闭包

内存溢出的常见方式

防抖与节流

请求的取消

WebSocket 与http

websocket的api与心跳机制（重要）

flash 即将过期，有什么代替方案？

Function的命名区别

JS类型判断的方法

Promise 的实现原理

async 函数

实现异步改为同步的方式有哪些

ES6 新增特性有哪些

简述打开一个新页面时，浏览器如何实现页面渲染

HTTP 三次握手简述

https 为什么是安全的（http与https对比着说）？

JS 继承与原型、原型链

this指向问题

对象创建的方式有哪些，有什么区别（对象原型链问题）

大体积文件上传（分片上传的实现）

敏捷开发模式（了解其概念）

CSS 篇

css 权重问题

css @import 与link 引入有什么不同，哪种方式更优？

less 与scss 的使用

回流与重绘的概念

布局

VUE 篇

实现原理；

传参方式

页面缓存keep-alive 的实现

如何实现组件的强制刷新功能;

vue管理平台鉴权如何设置？

Vue 语法忽略盲区（vue、vue-router、vuex、vue-cli、webpack）

前端面试概要（Vue开发）

JS 篇

闭包

内存溢出的常见方式

防抖与节流

请求的取消

WebSocket 与http

websocket的api与 心跳机制（重要）

flash 即将过期，有什么代替方案？

Function的命名区别

JS类型判断的方法

Promise 的实现原理

async 函数

实现异步改为同步的方式有哪些

ES6 新增特性有哪些

简述打开一个新页面时，浏览器如何实现页面渲染

HTTP 三次握手简述

https 为什么是安全的（http与https对比着说）？

JS 继承与原型、原型链

this指向问题

对象创建的方式有哪些，有什么区别（对象原型链问题）

大体积文件上传（分片上传的实现）

敏捷开发模式（了解其概念）

CSS 篇

css 权重问题

css @import 与link 引入有什么不同，哪种方式更优？

less 与scss 的使用

回流与重绘的概念

布局

VUE 篇

实现原理；

传参方式

页面缓存keep-alive 的实现

如何实现组件的强制刷新功能;

vue管理平台鉴权如何设置？

Vue 语法忽略盲区（vue、vue-router、vuex、vue-cli、webpack）

websocket的api与心跳机制（重要）