本人前端工作四年多，最近由于金三银四瞅了一下工作机会，总结一下近几年的知识点，还有一些面试题，方便以后自己回顾学习，广大搬砖的同学也可以借鉴学习，本人才疏学浅，有些写的不对或比较浅显的地方望海涵。也希望读者能对错误的地方评论指出，本人会及时改正。
问题分为基础篇和进阶篇，基础适合初级前端，能力好一点的可以直接略过基础篇看进阶篇
1.浏览器的盒模型是什么
盒模型是标签在页面中占据位置大小的规则，盒模型从外向内依次为：
margin--->padding-->border-->content;
不同浏览器的盒模型可能不一样，我们可以使用box-sizing才初始化所有标签的盒模型，他的值有两个：
box-sizing: content-box; //代表设置的宽高是padding + border + content 总和；
box-sizing: border-box;//代表设置的宽高为：border+content 总和
2.移动端如何做到响应式布局
主流主要是使用rem单位和媒体查询@media结合来实现：
rem是相对于body标签的font-size大小来相应的，
body的font-size:12px;
1rem = 12px*1 ====>12px
然后在不同的宽度的屏幕下写不同body的font-size，这样可以实现相同的rem，在不同屏幕中不同大小
3.什么时候会出现BFC,如何解决
4.项目中如何解决跨域
1.jsonp 缺点：只能是get请求
2.vue中本地代理在proxyTable里进行设置，缺点：本地起的node解决，打包到线上如果url跨域的话还是不行
3.node做中间层，使用koa,express等进行服务端渲染
4.vue中的nuxt来进行服务端渲染
5.后端设置允许我们跨域接口请求
5.输入url回车之后发生了什么 （越详细越好）
vue相关的问题：
1.vue的生命周期：
vue生命周期依靠先后触发顺序，依次为：
beforeCreate-->created-->mounted-->beforeUpdate-->updated-->beforeDestroy-->destroyed
项目中应用：
created：这时候页面还没有创建dom实例，不能进行页面操作，但是可以发起一些异步接口请求
mounted：dom已经创建，可以进行dom操作，图表渲染，swipper轮播图等
destroyed: 页面或组件销毁触发，可用于清除一些页面计时器
还可以提一下vue3中把beforeCreate和created去掉，用setup来替代了，其他的生命周期名字前面加个on
还有一些类似的问题：
小程序的生命周期
小程序组件的生命周期
react的生命周期等
2.vue路由有哪几种模式：
hash模式和history模式
hash: 是通过hash算法，用#来拼接后面的路径，缺点是：#后面的hash发生变化,不会导致浏览器向服务器发出请求,浏览器不发出请求就不会刷新页面
history: 这个需要进行设置，而且打包放在服务器点击跳转会404，要在服务器对所有路径进行映射
3.vue 组件传值方式 （约多越好）
1.父组件通过$ref获取子组件的变量和方法
2.父--》子 通过：和 @ 传给子组件变量和方法，子组件用pros接收变量，通过$emit触发父级方法
3.通过vuex对通用数据管理，比如用户信息，权限等
4.兄弟组件使用eventBus来解决
5.本地存储localstorage,sessionstorage,cookie
6.
4.vuex的具体使用规则
1.创建store.js，store包含四个属性：
state (类似存储全局变量的数据)
getters (提供用来获取state数据的方法)
actions (提供跟后台接口打交道的方法，并调用mutations提供的方法)
mutations (提供存储设置state数据的方法)
2.然后再main.js，全局引入，
3.在组件的计算属性那里获取，或是代码逻辑中获取：
computed:{
city:function() {
// 通过vuex的getters方法来获取state里面的数据
return this.$store.getters.getCityFn;
//通过state获取里面的值
//return this.$store.cityName;
}
}//这里如果用计算书写写city,data中不声明city也可以
4.改变state的值：
一：this.$store.commit('updateCount', “这是数据”) 第一个值为mutation中的方法，第二个为参数，可以为对象
二：第一个参数是actions里面的方法，第二个参数
this.$store.dispatch('updateCountAsync', {
num: 5,
time: 2000
})
},
详细可以看这篇文章：https://segmentfault.com/a/1190000011914191
4.1 vuex中的mapState, mapGetters,mapMutaions,mapActives了解那些
当一个组件需要获取多个状态时候，将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题，我们可以使用 mapState 辅助函数帮助我们生成计算属性，让你少按几次键
首先引入你要使用的方法：
import { mapState, mapGetters } from 'vuex'
使用： //这里mapState常用，写一个demo,我们项目都是第二种写法
computed: mapState({
count: 'count', // 第一种写法
sex: (state) => state.sex, // 第二种写法
from: function (state) { // 用普通函数this指向vue实例,要注意
return this.str + ':' + state.from
},
// 注意下面的写法看起来和上面相同,事实上箭头函数的this指针并没有指向vue实例,因此不要滥用箭头函数
// from: (state) => this.str + ':' + state.from
myCmpted: function () {
// 这里不需要state,测试一下computed的原有用法
return '测试' + this.str
}
}),
详细看这篇文章：https://blog.csdn.net/dkr380205984/article/details/82185740
5.eventBus的具体使用规则
两种引入方式：
1.新建 eventBus.js文件 ,然后在使用的地方引入
// eventBus.js
import Vue from 'vue'
export const EventBus = new Vue()
2.定于全局的eventBus
// main.js
Vue.prototype.$EventBus = new Vue()
在需要使用的地方引入eventBus.js，或直接使用 this.$EventBus
触发eventbus事件：
this.$EventBus.$emit('getTarget', {'name':'zhangsan'}); 第一个参数是eventBus中的公共方法，第二个是传参
监听eventbus事件：
this.$EventBus.$on('getTarget'this.change)
第一个参数是eventBus的公共方法，第二个可以是当前组件method里的change方法，也可以直接写回调函数，在回调函数中写一些操作
或是
this.$EventBus.$on('getTarget', target => {
console.log(target);
});
可以在组件销毁前清除eventBus,一般都是在监听eventbus事件：this.$EventBus.$on组件中清除，$emit不需要
beforeDestroy() {
this.$EventBus.$off("getTarget");
},
6.vue中data为什么是函数
7.nextTick是什么，平常怎么用
this.$nextTick()将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。用处：
1.获取标签进行操作，但是可能标签还没生成，可以把操作写在nextTick里面，这样就一定能获取标签
2.获取轮播图的标签，然后进行操作。
8.vue3和vue2有哪些地方的不同
9.vue2中如何实现双向数据绑定，有什么缺点，如何对对象和数组进行监听，vue3是怎么实现的？
10.vue中指令如何使用
11.何解决数据层级结构太深，改变data页面没响应怎么办
12.如何修改引入第三方ui库的样式，如elementui,iview,vant的默认样式
1.使用deep深度选择器来修改css，例子：
/deep/ .el-tabs__nav-wrap::after {
background-color: unset;
}
/deep/ .el-tabs__nav-scroll {
display: flex;
justify-content: center;
}
2.不要写在scoped的当前页面的css里面，写在全局样式那里，注意用特殊类名包裹，防止全局污染
13 minxins用过吗，主要用它做什么，有什么好处
mixins可以用户多个组件用相同功能代码的抽离，他抽离出来的含有data,methods，以及生命周期，组件引入mixins后，是将mixins内部的内容如data等方法、method等属性与父组件相应内容进行合并。
如果在引用mixins的同时，在组件中重复定义相同的方法，则mixins中的方法会被覆盖。
详细看这个： https://www.jianshu.com/p/a72bf060eeaa
原生js问题
1.addEventListener具体是做什么的，
2.es6新增常用的属性
3.async,await的具体使用方法
4.说一下es6中的类，如何进行使用
5.call,apply,bind是做什么的，有什么区别
6.promise如何使用，
7.操作数组的方法，操作字符串的方法 （）
8.什么是宏任务和微任务，事件机制是什么样的
9.什么是深cope,为什么要用深cope,如何实现深cope（多种方式，优缺点）
10.如何判断变量是数组还是对象（多种方式）
11.数组的排序，它的时间复杂度是多少，
项目中问题
1.项目中会遇到哪些缓存问题，都是有哪些缓存
2.前端性能优化方案有哪些？
3.js动画和css动画有什么区别？性能哪个好
4.react,angularjs vue 用过哪些，优缺点都是什么样，你会怎么选型
5.如何实现换肤功能（多种方式）
6.git你常用的命令，都是用过git的哪些功能
小程序
1.用过小程序哪些sdk
webpack的问题
1.用过哪些loader和pluger
进阶篇
1.防抖节流函数的具体写法
2.有几种继承方式
1.class类中可以使用extends来继承
2.使用原型链prototype来继承
今天总结了很多问题，但是答案还没有写上去，后续会加上
