工作中必备的核心框架工具
Vue和React是前端开发岗必备的两种技术栈，以下是工作中项目开发必须要具备的框架技能，参考大纲查漏补缺
Vue（Vue2/3）
- Vue主流组件库（ant-design、element-ui、arco-design）
- Vue组件封装（公共组件抽离，npm组件发布以及私有部署，编写组件必须考虑的几个要素props、methods、样式）
- Vue父子、兄弟组件通信（Vuex，EventBus）
- 生命周期函数、Watch函数、以及计算属性Computed的应用
- Vue动态路由，权限相关（菜单页面、按钮操作），单点登录，使用图片验证防止CSFR攻击
- Vue3更新的内容，老旧Vue2项目维护和新项目Vue3技术选型的注意点，Vue配合TypeScript
React（React16及以上）
- 企业级开发框架UMI（简化项目构建和初始开发流程）
- React主流组件库（ant-design、arco-design）
- React组件封装（类比Vue）
- React组件通信（Redux、Redux-thunk、Redux-saga、Redux-logger、dva）
- 生命周期函数、React Hooks钩子函数的应用
- 无状态组件、项目分层（view + model + service）
- React路由和权限（类比Vue）
公共部分
- webpack打包配置、性能优化、webpack.dev.conf.js添加cdn配置
- 如何首屏加载优化、图标和图片资源优化
目前面试中已经遇到的问题
JavaScript和CSS
- ES6的数据类型有哪些？（基本数据类型和引用数据类型，ES6新增
Symbol，用于对象属性中唯一的key；新增BigInt用于解决数据量过大Int报错的问题） - ES6新增的方法有哪些？（
new Set()处理数组去重，new Map()链式处理数组，可以搭配Filter使用，再说一些和ForEach的区别，ForEach是在原数组中操作。
可以再说说is()，判断值是否相等；assign()，浅拷贝对象；entries()与后者反之和fromEntries()键值对数组转为对象）- Javascript中的assign()方法到底是浅拷贝还是深拷贝？
- Es6新增的对象方法
- 如何判断一个数据是否是对象？（1.isArray 2.Object.prototype.toString().call()，返回'[object Array]'即为 3.实例的构造函数属性constructor指向构造函数，数组.contructor===Array即可 4.使用instanceof亦可，a instanceof Array）
- JS判断是否是数组的四种做法
- 什么是BFC盒子模型，他的作用是什么（具有 BFC 特性的元素可以看作是隔离了的独立容器，容器里面的元素不会在布局上影响到外面的元素；
触发条件：1.overflow 除了 visible 以外的值 (hidden、auto、scroll)。2.绝对定位元素：position (absolute、fixed)。3.display 为 inline-block、table-cells、flex。）- 盒子模型与BFC
- null和undefined的区别（null和undefined非严格相等，自身也全等，但是相互不严格相等；null是人为赋予初始空值，undefined是全局对象的属性；typeof(null)不是null，而是object，
是因为typeof判断二进制码，object前三位是0，null刚好也是，typeof(undefined)正常；） - var和let的区别（var是函数作用域，let是块状作用域，let声明的变量不能重复；const声明的变量不可修改；var声明的变量属于window，可以window.访问，let和const的不行）
- var和let的区别
- const 声明了数组，还能 push 元素吗，为什么？
push()、pop()、shift()、unshift()、splice()、sort()、reverse()操作的区别。shift删除第一个元素并返回，unshift反之。
splice用于添加或删除数组中的元素，array.splice(index,howmany,item1,.....,itemX)；index必需，规定从何处添加/删除元素；
howmany可选，规定应该删除多少元素，必须是数字，但可以是 "0"，如果未规定此参数，则删除从index开始到原数组结尾的所有元素；
item1, ..., itemX可选，要添加到数组的新元素- JavaScript splice() 方法
- axios有什么竞品是否有了解过（ajax和fetch，fetch是js原生api，需要自己做一些封装；ajxa针对mvc不是现在mvvm，并且基于原生xhr，还需要引入jquery；axios支持promise，支持防止csrf）
- ajax、axios、fetch之间的详细区别以及优缺点
- Ajax、Fetch、Axios
- js的深拷贝和浅拷贝（1. 常用深拷贝使用JSON.parse+JSON.stringify、2. object.assign一级属性深拷贝二级属性浅拷贝、3. 用foreach方法递归迭代实现深拷贝、4. 使用第三方函数库，比如loadsh的clonedeep或者underscore的deepclone，clone是浅拷贝）
- js的深拷贝与浅拷贝
- H5移动端如何做性能优化（1. 资源压缩，图片压缩，引入资源包压缩，有条件的使用cdn加速，icon雪碧图精灵图。2. 优化dom结构，减少页面的重绘和重排布，首屏支出的页面使用内联css，使用节流防抖的手段减少修改dom事件触发的频率。
- 使用预先加载骨架图的方式优化用户体验，我们之前有用过page-web-skeleton这个chorme组件快速生成骨架图。4. 尽量使用css内置动画，减少使用
requestAnimationFrame，他会触发大量的dom操作，
而内置动画会调用硬件加速，体验更优。5. 配合后端同学做接口合并，对于首页显示的接口统一为一个总接口，并针对性优化。6. 最后就是优化主要针对不同项目，通过不同的方式去做优化，针对性的修改）
- H5前端性能优化图鉴
- 使用预先加载骨架图的方式优化用户体验，我们之前有用过page-web-skeleton这个chorme组件快速生成骨架图。4. 尽量使用css内置动画，减少使用
- css样式的优先规则（简而言之，内联样式 > ID 选择器 > 类选择器 = 属性选择器 = 伪类选择器 > 标签选择器 = 伪元素选择器，
!important最高）- CSS的优先级
- CSS 样式优先级
Vue
- Vue的实现原理，
Object.defineProperty()；Vue2 和 Vue3 的实现响应式的区别； Vue如何实现数组的响应式（底层代码主要是编写了一套js相同的方法暴露出来，Vue通过原型拦截的方式重写了数组的7个方法） - Vue如何封装一个组件（定义参数，定义需要暴露出的方法，参数需要写的属性，最后export出来）
- Vue父子组件和兄弟组件的通信方式（1. 第一种方式借助父组件。2. 第二种方式借助eventbus，在main中全局注册事件bus，通过on和on和emit来监听和触发。3. 使用Vuex）
- vue学习之----兄弟组件之间通信方式
- Vue如何实现v-model（使用object.defineProperty设置getset方法，再给绑定的input输入框的keyup事件添加劫持，从而实现mvvm，即数据驱动页面；接着继续吹mvvm和之前jquery时代的区别；
jquery主要是链式函数操作，对dom的操作很多，性能上会有一定落后；mvvm是指model，view，viewmodel，最后一个是同步view和model的对象，model是业务逻辑，view是页面ui）- Vue的v-model的原理和实现
- 什么是MVVM？
- 当Vue使用history模式的时候，出现404，nginx该如何处理（
try_files $uri $uri/ /index.html，表示查找当前请求地址对应的文件是否存在，不存在则查找请求地址对应的目录是否存在，还是不存在则重定向到/index.html页面）- Nginx：vue路由使用history模式刷新404
React（个人简历未突出react能力，所以这方面问的比较少）
- redux如何使用？
- redux中传递组件样式css无法生效怎么办？
杂乱记录一些
- 一些奇奇怪怪工作中很少用到的冷门CSS知识点考察题目（比如：长50px，宽50px，border-radius: 30px 50px; 是什么效果？）
- 数组去重、数组排序以及组合能力的算法题（牛客网和Leecode刷题处理）
- 手写sql（加分项）
