总结一下近几年的知识点，还有一些面试题，方便以后自己回顾学习，广大搬砖的同学也可以借鉴学习，本人才疏学浅，有些写的不对或比较浅显的地方望海涵。也希望读者能对错误的地方评论指出，本人会及时改正。
问题分为基础篇和进阶篇，基础适合初级前端，能力好一点的可以直接略过基础篇看进阶篇
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回车之后发生了什么 （越详细越好）
https://juejin.cn/post/6844903784229896199
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中指令如何使用
1.指令有全局指令和局部指令，两种引入方式不同
2.指令钩子函数：不同时间指令会触发
1.bind: 此钩子函数只会被调用一次，可以定义一个在绑定时执行一次的初始化动作
2.inserted: 当被绑定的元素插入到父元素中是低调用（此处的父元素不局限于document中）
3.update: 不论被绑定的值是否发生了变化，在末班更新时都会被调用，
4.componentUpdated:被绑定的元素在模板完成一次更新周期时调用，
5.unbind: 只调用一次，元素解绑时调用
3.声明：名字为focus,使用的时候要用v-focus
//全局注册
Vue.directive('focus', {
inserted: function (el) {
el.focus();//聚焦
}
});
4. 使用： <input type="text" v-focus>
5.指令里面的操作一般都是原生js的操作，对于当前标签的样式，或是当前标签的操作，或标签内部的增减
6.指令也可以传入一些变量，标签操作使用
详细可看： https://www.jianshu.com/p/c5de3aa0c465
11.何解决数据层级结构太深，改变data页面没响应怎么办
1. this.set(this.template, 'name', 'lisi'); //改变template的name属性，改为lisi
2. this.$forceUpdate(); 强制页面刷新，有些地方使用不错
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
14 vue中插槽的用处
1.插槽常用于父组件中可以书写一些内容，插入到子组件中，来实现父组件控制子组件的部分内容
2.写法： 使用
父组件中：
<Child>
<template v-slot="headerContent">父级的内容插到子组件中</template>
</Child>
子组件中：
<slot name="headerContent"></slot>
15 vue中如果我要实现一个类似于 window.alert() 提示组件要求像调用 JS 函数一样调用它,或是Vue.extend + vm.$mount 的用途
说明：extend 可以把组件插入当具体标签内，和插槽还有相似又不同，如上图
1. Vue.extend( options )
参数： options：一般为组件，
用法：使用基础 Vue 构造器，创建一个“子类”。参数是一个包含组件选项的对象；
2.用法：
1.先创建一个Alert组件，写样式和逻辑，
2.import Alert from '@/components/public/Alert'; //引入刚才写的弹框组件
let AlertConstructor = Vue.extend(Alert); // 返回一个“扩展实例构造器”
let AlertModal = (o) => {
let alertDom = new AlertConstructor({
el: document.createElement('div'); //将Alert组件挂载到新创建的div上
})
document.body.appendChild(alertDom.$el); //把Alert组件的dom添加到body里
}
export default AlertModal;
3.0 main.js中引入然后设置为全局，最后再使用
import alert from '@/common/alertModal' //这里引入的是js文件
Vue.prototype.$alert = alert;
详情参考： https://blog.csdn.net/ZYS10000/article/details/107477418 和
https://www.jb51.net/article/195339.htm
原生js问题
1.addEventListener具体是做什么的，
2.es6新增常用的属性
3.async,await的具体使用方法
4.说一下es6中的类，如何进行使用
5.call,apply,bind是做什么的，有什么区别
6.promise如何使用，
7.操作数组的方法，操作字符串的方法 （）
8.什么是宏任务和微任务，事件机制是什么样的
9.什么是深cope,为什么要用深cope,如何实现深cope（多种方式，优缺点）
10.如何判断变量是数组还是对象（多种方式）
11.数组的排序，它的时间复杂度是多少，
12.export和export default的区别？
使用上的不同
1.export default xxx
import xxx from './'
2.export xxx
import {xxx} from './'
3.export也可以这样使用：
export {debounce,dateFormat} //utils.js文件
import { dateFormat, debounce } from "./utils"; //使用的地方
项目中问题
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来继承
今天总结了很多问题，但是答案还没有写上去，后续会加上
