VUE
vue的生命周期是什么
vue每个组件都是独立的，每个组件都有一个属于它的生命周期，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。
beforeCreate() 在实例创建之间执行，数据未加载状态
created() 在实例创建、数据加载后，能初始化数据，dom渲染之前执行
beforeMount() 虚拟dom已创建完成，在数据渲染前最后一次更改数据
mounted() 页面、数据渲染完成，真实dom挂载完成
beforeUpadate() 重新渲染之前触发
updated() 数据已经更改完成，dom 也重新 render 完成,更改数据会陷入死循环
beforeDestory() 和 destoryed() 前者是销毁前执行（实例仍然完全可用），后者则是销毁后执行
vue组件如何避免样式全局污染
scoped属性的组件，为了达到不污染全局，做了如下处理：
给HTML的DOM节点加一个不重复属性data-v-469af010标志唯一性
在添加scoped属性的组件的每个样式选择器后添加一个等同与“不重复属性”相同的字段，实现类似于“作用域”的作用，不影响全局
如果组件内部还有组件，只会给最外层的组件里的标签加上唯一属性字段，不影响组件内部引用的组件（ 注意 ）
vue的css写在哪里？还有方式吗？
.vue组件中，
在assets目录下创建，然后导入
在JS中导入
import '@/assets/css/index.css'
在CSS中导入
@import "../static/css/user.css";
Vue按需加载里的 Import是命令还是方法？怎么理解
是方法，
ES6模块导入的语法其中一种。
component: () => import()
import * as 变量名Obj from '路径及文件名.js';
import {变量名} from '路径及文件名.js';
import {变量名 as 别名} from '路径及文件名.js';
import '路径及文件名.js';
import 变量名 rom '路径及文件名.js';
import( '路径及文件名.js');
watch和computed的区别，watch可以替代computed吗，深度监听怎么写？
computed：有缓存，可以监控多个数据变化，键随意
watch：只能简单一个数据变化，键必须是模型名
不可以，因为computed有缓存
深度监听：监听数组，数组中的对象属性发送改变监听不到解决如下
watch:{
params: {
deep: true,
handler: function (newVal,oldVal){
this.getSetting(this.params);
}
}
}
hash、history 模式区别
区别：地址栏多个
其次：history需要配置服务器才能正常访问
hash、history 模式原理
#hash路由
通过location.hash切换，通过window.onhashchange 监听切换
#history路由
通过history.pushState 切换,window.onpopstate 监听路径的切换
vuex如何实现数据持久化
H5存储或第三方模块
为什么要有生命周期
因为：VUE中MVVM思想、虚拟DOM等机制
所以：需要钩子函数/生命周期，从而方便开发、提升性能等
你说下vue路由模式有几种？
常用路由模式有2个，分别为hash和history 直接修改路由构造函数加个mode键即可
准备说有3个，hash/history用于客户端，abstract用户服务端
你说下vue路由原理？
vue路由是基于SPA单页面应用思想去开发的
利用BOM API 来使用
hash模式 通过 BOM location对象的hash属性来改变路由
history模式 通过BOM history对象的pushState属性来改变路由
说下单页面应用SPA和多页面应用MPA的优缺点，如何选择
SPA优点：1.切换速度快、减少HTTP请求、便于加特效
2.前后端分离便于后期扩展
3.转场动画，也就是一个页面切换另一个页面 transition
缺点：1. 不利于seo优化
2. 初次加载耗时（注：这时候可能问vue首屏加载慢如何解决 见优化部分答案）SPA缺点：不利于SEO优化（就是百度可以搜到你）
MPA多页面的好处
概念：有多个页面，跳转方式是页面之间的跳转
优点：首屏加载快；seo优化好
缺点：跳转较慢；相对复杂，没有实现前后端分离
如何选择
根据项目需求，老板没有明确说直接用vue脚手架创建框架就行，
但是老板说需要seo优化则通过：Vue.js 服务器端渲染（nuxt.js）
vue的SEO优化不好，如何解决的
一、ssr
vue-cli+nuxt.js ssr的原理就是服务器端渲染，然后返回。用nuxt的话，最好是项目刚开始就使用，不然就要重构代码，费时费劲，成本很高，对服务器的压力还是比较大。但是优点是首屏加载速度会比较快。
二、预渲染：prerender-spa-plugin插件
只针对部分页面。如果是详情页，希望seo收录每个详情页的信息，则不太适用。或者项目过大的情况，配置过多，打包会很漫长。
前端如何实现多页面应用
Nuxt.js
#
1、用户打开浏览器，输入网址请求到Node.js
2、部署在Node.js的应用Nuxt.js接收浏览器请求，并请求服务端获取数据
3、Nuxt.js获取到数据后进行服务端渲染
4、Nuxt.js将html网页响应给浏览器
#
Nuxt.js使用Vue.js+webpack+Babel三大技术框架/组件
Babel 是一个js的转码器，负责将ES6的代码转成浏览器识别的ES5代码。
#
基于 Vue.js 自动代码分层 服务端渲染 强大的路由功能，支持异步数据 静态文件服务 ES6/ES7 语法支持 打包和压缩 JS 和 CSS HTML头部标签管理 本地开发支持热加载 集成ESLint 支持各种样式预处理器： SASS、LESS、 Stylus等等
声明式导航和编程式导航区别？
写法不一样,声明式导航是写在组件的template中,通过router-link来触发,
编程式导航写在js函数中,通过this.$router.push(xxx)来触发路径
vuex是什么？怎么使用？哪种功能场景使用它？
vuex是：就是用来存放所有组件数据的仓库,也就是组件状态管理工具
state:存储数据；
mutations:更新数据的方法；
actions:调用mutations方法，更新state数据；
getters:对state中的数据进行预处理；
vuex 的作用
实现所有组件相互通信，数据共享
组件之间需要相互通信时，例如购物车购买数量、登录信息等
什么是计算属性和侦听器
计算属性：普通方法的升级版，有缓存
怎么用：在data同级定义computed对象来声明计算属性、调用不加小括号
侦听器：用来监控模型数据变化
怎么用：在data同级定义watch对象声明侦听器、方法名就是data中的键、不能调用
如何选：
1 事件 和 封装减少视图代码冗余便于后期维护 先用普通方法
2 上述多次执行耗时 计算属性优化
3 当需要监控模型数据改变 使用侦听器。例如：搜索、全选全不选等等
什么是混入
是什么：vue中提供的解决组件代码冗余的技术，可以提起相同的普通方法、模型数据等
怎么用：Vue.mixin 或 mixins键来定义
实战用：后期项目的跳转、返回上一页、提示信息等等
什么是vue组件
是什么：用来代替传统HTML的一种解决方案、里面还是HTML、JS、CSS
好处：倡导模块化、便于后期相互调用、从而减少代码冗余、方便维护
怎么用： Vue.component(组件名，{template, methods, data, ....})
组件通信工作流
父传子： 子组件通过 props 属性，绑定父组件数据，实现双方通信
子传父： 将父组件的事件在子组件中通过 $emit 触发
兄弟 ：1 创建bus总线 全局仓库
2 传递数据 bus.$emit
3 接受数据 bus.$on
vue中的事件修饰符
事件修饰符：.stop、.prevent、.once等
键盘修饰符：.enter、.ctrl .enter等
什么是路由懒加载
路由懒加载是通过异步的方式来加载对应的路由组件，提高页面相应速度
vue的路由使用步骤？
1.下载vue-router路由模块；
2.创建路由对象；
3.配置路由规则；
4.将路由对象注册为vue实例对象的成员属性；
http协议状态码301和302的区别
301 redirect: 301 代表永久性转移(Permanently Moved)
302 redirect: 302 代表暂时性转移(Temporarily Moved )
302重定向只是暂时的重定向，浏览器会抓取新的内容而保留旧的地址，因为服务器返回302，所以，搜索浏览器认为新的网址是暂时的。
301重定向是永久的重定向，浏览器在抓取新的内容的同时也将旧的网址替换为了重定向之后的网址
谈谈你对虚拟DOM的理解？
就是用JS 的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM节点，因为浏览器工作机制，通过虚拟DOM提升性能。
回流重绘
回流：重新布局
重绘：改变元素属性样式
谈谈你对diff算法的理解？
diff算法是虚拟DOM技术的产物，核心思想是通过新旧虚拟DOM做对比，（即diff），将变化的地方更新在真实的DOM上，也需要diff高效执行对比的过程，从而降低时间复杂度为O(n).
步骤一：用JS对象模拟DOM树
步骤二：比较新旧虚拟DOM树的差异
步骤三：把差异应用到真正的DOM树上
v-for中有key值和没有key值的区别
它们区别主要在于虚拟DOM的复用，绑定key可以更好的复用，避免重复渲染
fetch、axios区别
相同点：都是基于promise封装的HTTP库
不同点:
1 fetch官方 axios第三方
2 axios更强例如拦截器、而fetch需要自己封装等
请谈谈对http的理解
HTTP：超文本传输协议，主要由request请求 和response响应 组成，规定了计算机之间如何相互通信
项目开发中常遇到的
请求方式常用的有get、post、put、delete
HTTP状态码：...
请求头：expire、gzip、content-type等
HTTP状态码
100 Continue 继续，一般在发送post请求时，已发送了http header之后服务端将返回此信息，表示确认，之后发送具体参数信息
200 OK 请求成功
201 Created 请求成功并且服务器创建了新的资源
202 Accepted 服务器已接受请求，但尚未处理
301 Moved Permanently 永久性重定向。
302 Found 临时性重定向。
303 SeeOther 临时性重定向，且总是使用 GET 请求新的 URI。
304 Not Modified 浏览器缓存
400 BadRequest 参数有误。
401 Unauthorized 密码错误。
403Forbidden 没有权限。
404 NotFound 文件不存在。
500 InternalServer Error 服务器错误。
503 ServiceUnavailable 服务器端暂时无法处理请求（可能是过载或维护）。
vue实现数据双向绑定的原理
采用数据劫持结合发布者-订阅者模式、的方式，通过 Object.defineProperty() 来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发响应监听回调
Created与Mounted的区别
Created：在dom渲染之前调用，通常初始化某些属性值，然后再渲染成视图。
Mounted：在dom渲染之后调用，初始化页面完成后，再对dom节点进行一些需要的操作。
vue中mounted和updated这两个生命周期怎么运行的
mounted 页面首次渲染完毕时触发
updated 模型数据更新时候触发
vue首屏加载过慢如何解决
1、路由懒加载（也就是要的时候的时候进行加载。
2、组件懒加载
3、UI组件按需加载
4、外部CDN加载
5、通过externals加载
什么是JSX？
JSX即JavaScript XML，是JS的一种扩展语言。
解释单向数据流和双向数据绑定
单向数据流： 顾名思义，数据流是单向的。数据流动方向可以跟踪，流动单一，追查问题的时候可以更快捷。缺点就是写起来不太方便。要使UI发生变更就必须创建各种 action 来维护对应的 state；
双向数据绑定：数据之间是相通的，将数据变更的操作隐藏在框架内部。优点是在表单交互较多的场景下，会简化大量与业务无关的代码。缺点就是无法追踪局部状态的变化，增加了出错时 debug 的难度。
Vue 如何去除url中的#
vue-router 默认使用 hash 模式，所以在路由加载的时候，项目中的 url 会自带
需要注意的是，当我们启用 history 模式的时候，由于我们的项目是一个单页面应用，所以在路由跳转的时候，就会出现访问不到静态资源而出现 404 的情况，这时候就需要服务端增加一个覆盖所有情况的候选资源：如果 URL 匹配不到任何静态资源，则应该返回同一个 index.html 页面(重定向)。
route和router的区别
$router 为 VueRouter 实例，想要导航到不同 URL，则使用 $router.push 方法$route 为当前 router 跳转对象里面可以获取 name 、 path 、 query 、 params 等
怎么在vue获取dom元素
通过ref,,给相应的元素加ref=“name” 然后再this.$refs.name获取到该元素
NextTick 是做什么的
$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM
当你修改了data的值然后马上获取这个dom元素的值，是不能获取到更新后的值，
你需要使用$nextTick这个回调，让修改后的data值渲染更新到dom元素之后在获取，才能成功
Vue 组件 data 为什么必须是函数
因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了
计算属性computed 和事件 methods 有什么区别
我们可以将同一函数定义为一个 method 或者一个计算属性。对于最终的结果，两种方式是相同的
不同点：
computed: 计算属性是基于它们的依赖进行缓存的,只有在它的相关依赖发生改变时才会重新求值对于 method ，只要发生重新渲染，method 调用总会执行该函数
对比 jQuery ，Vue 有什么不同
jQuery 专注视图层，通过操作 DOM 去实现页面的一些逻辑渲染； Vue 专注于数据层，通过数据的双向绑定，最终表现在 DOM 层面，减少了 DOM 操作Vue 使用了组件化思想，使得项目子集职责清晰，提高了开发效率，方便重复利用，便于协同开发
vue-router 路由实现
路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能
Vue 组件 data 为什么必须是函数
因为js本身的特性带来的，如果 data 是一个对象，那么由于对象本身属于引用类型，当我们修改其中的一个属性时，会影响到所有Vue实例的数据。如果将 data 作为一个函数返回一个对象，那么每一个实例的 data 属性都是独立的，不会相互影响了
对SSR或BSR的理解
SSR服务器渲染：有利于SEO优化
BSR客户端渲染：不利于SEO优化
Vue 中怎么自定义指令
全局注册
Vue.directive('focus', {
inserted: function (el) {
el.focus()
}
})
局部注册
directives: {
focus: {
inserted: function (el) {
el.focus()
}
}
}
Vue 中怎么自定义过滤器
可以用全局方法 Vue.filter() 注册一个自定义过滤器，它接收两个参数：过滤器 ID 和过滤器函数。过滤器函数以值为参数，返回转换后的值
Vue.filter('reverse', function (value) {
return value.split('').reverse().join('')
})
<span v-text="message | reverse"></span>
过滤器也同样接受全局注册和局部注册
对 keep-alive 的了解,哪里用到的
keep-alive 是 Vue 内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染
<keep-alive>
<component>
</component>
</keep-alive>
可以使用API提供的props，实现组件的动态缓存
什么时候用到：前进刷新,后退缓存用户浏览数据
列表页面 =>点击进入详情页=> 后退到列表页 要缓存列表原来数据
重新进入列表页面 => 获取最新的数据
Vue 的核心是什么
数据驱动 组件系统
vue-router有哪几种导航守卫
1>全局守卫
a：router.beforeEach 全局前置守卫，进入路由之前
b：router.beforResolve 全局解析守卫，在beforeRouterEnter调用之后调用
c：router.afterEach 全局后置钩子，进入路由之后
2>路由独享守卫
如果不想全局配置守卫的话，可以为某些路由单独配置守卫
3>路由组件内的守卫
beforeRouteEnter 进入路由前, 在路由独享守卫后调用 不能 获取组件实例 this，组件实例还没被创建beforeRouteUpdate (2.2)路由复用同一个组件时,在当前路由改变，但是该组件被复用时调用 可以访问组件实例this
beforeRouteLeave 离开当前路由时, 导航离开该组件的对应路由时调用，可以访问组件实例 this
vue-router 使用params与query传参有什么区别
vue-router 可以通过 params 与 query 进行传参
this.$router.push({path: './xxx', params: {xx:xxx}})
this.$router.push({path: './xxx', query: {xx:xxx}})
this.$route.params
this.$route.query
params 是路由的一部分,必须要有。query 是拼接在 url 后面的参数，没有也没关系
params 不设置的时候，刷新页面或者返回参数会丢，query 则不会有这个问题
你在什么场景下使用了vuex？
当应用遇到多个组件共享状态的时候，即：多个视图依赖于同一个状态，不同视图的行为需要变更同一个状态
如：
用户的个人信息管理模块
电商项目购物车模块
props和data的优先级，区别
props>data
props就相当于你的参数，data就相当于局部变量，组件其实就是一个函数
React
react如何实现双向绑定
在React当中，有个onChange属性，可以给input绑定事件，当input框里的值发生变化时会触发调用方法，这个方法会合并data到this.state,并重新渲染组件。
高阶组件是什么 什么情况下有用到
如果一个函数 接受一个或多个组件作为参数并且返回一个组件 就可称之为 高阶组件。
什么时候使用：页面复用,组件渲染性能追踪，权限控制。
react生命周期
React组件的生命周期可以分为挂载、渲染和卸载这几个阶段，当渲染后的组件需要更新的时候，我们会重新去渲染组件，直到卸载。
因此，我们可以把React生命周期分为两类：
1 当组件在挂载或卸载时
2 当组件接收新的数据时，即组件更新时
componentWillMount 在渲染前调用
componentDidMount 在第一次渲染后调用
componentWillReceiveProps 在组件接受一个新的prop时调用，这个方法在第一次渲染的时候不会被调用。
shouldComponentUpdate 返回一个布尔值，在组件接受到新的props或是state时被调用。在初始化时或是使用forceUpdate时不被调用。可以在你确认不需要更新组件时使用。
componentWillUpdate 在组件接受到新的props或是state但还没有render时被调用。在初始化时不会被调用。
componentDidUpdate 在组件完成更新后立即调用。在初始化时不会被调用
componentWillUnmount 在组件从DOM中移除的时候立即被调用
react做过哪些优化
1 减少不必要的props引起的重绘
2 减少不必要state引起的重绘
3 长列表优化
redux 流程
1.View在redux中会派发action方法
2.action通过store的dispatch方法会派发给store
3.store接收action，连同之前的state，一起传递给reducer；
4.reducer返回新的数据给store；
5.store去改变自己的state。
说一下react中的key
它主要在于虚拟DOM的复用，绑定key可以更好的复用，避免重复渲染
Redux 数据流动 有什么组件 redux中connect介绍一下 connect的底层是什么
connect是一个高阶函数，首先传入mapStateToProps、mapDispatchToProps，然后返回一个生产Component的函数(wrapWithConnect)，然后再将真正的Component作为参数传入wrapWithConnect，这样就生产出一个经过包裹的Connect组件。
React的路由 项目中用到什么路由 介绍一下
1 两种常用的路由：HashRouter和BrowserRouter
2 路由组件：包裹整个应用：一个React应用只使用一次
3 HashRouter：使用URL的哈希值实现，就是在地址栏的后面有
4 推荐使用BrowserRouter：使用H5的historyAPI实现（localhost:3000/djjdd）
5 Link:组件：用于指定导航链接（a标签） 在浏览器解析时，会将link组件解析成a标签
6 Router组件：指定路由展示相关的组件信息
React路由传参方法
通过params
1.路由表中
<Route path=' /sort/:id ' component={Sort}></Route>
2.Link处
HTML方式
<Link to={ ' /sort/ ' + ' 2 ' } activeClassName='active'>XXXX</Link>
JS方式
this.props.history.push( '/sort/'+'2' )
3.sort页面
通过 this.props.match.params.id 就可以接受到传递过来的参数（id）
通过query
前提：必须由其他页面跳过来，参数才会被传递过来
注：不需要配置路由表。路由表中的内容照常：<Route path='/sort' component={Sort}></Route>
1.Link处
HTML方式
<Link to={{ path : ' /sort ' , query : { name : 'sunny' }}}>
JS方式
this.props.history.push({ path : '/sort' ,query : { name: ' sunny'} })
2.sort页面
this.props.location.query.name
其他
sass和less区别
1.编译环境不一样,less是基于JavaScript的在客户端处理 所以安装的时候用npm，sass是基于ruby所以在服务器处理。
2.变量符不一样，Less是@，而Scss是$，而且变量的作用域也不一样。
Sass的功能比Less强大
link和@inmport的区别
1.link是html的标签，不仅可以加载css还可以定义Rss , rel连接属性；@import是css的语法规则，只能引入样式；
2.加载页面时，link是同时加载的，@impor是页面加载完后才加载
3.link没有兼容性的问题，而@import只在较高版本的浏览器才可以识别
4.link可以通过js插入操作dom，@import 不可以！
如何拦截后台响应回来的数据，应用
回答：通过axios响应拦截器
应用：接口权限避免地址栏手动输入非法访问、nprogress关闭、统一错误处理等
拦截器怎么实现的？
1 直接使用axios默认提供的即可
2 自己封装方法，大家都调用这个方法 即可实现统一处理请求和响应 也就是拦截器
axios怎么跳过第一个请求，直接请求第二个？
.then()
.then()即可
axios是什么？怎么使用？描述使用它实现登录功能的流程？
是什么：一个http请求库
怎么用：1引入库或模块，2 直接根据语法使用即可发送异步请求
登录流程：
1 UI框架实现表单
2 表单验证
3 发送异步请求
4 成功了 H5存储跳转
5 失败了 提示即可
你用vue写登录注册的时候 具体都做了那些 登录注册怎么用vuex实现它
vuex如何实现登录注册：
1. state定义uname、token
2. action定义接口异步请求
3. 登录表单验证成功，调用action即可
vue打包上线流程
1. yarn build
2. 将dist交给运维或自己部署到服务器即可
留心1：配置后端代理解决跨域，开发的时候是http-proxy-middleware
留心2：history得做服务端配置 https://router.vuejs.org/zh/guide/essentials/history-mode.html
git中如何解决代码冲突的问题
方法1：
切换到本地dev 然后git pull拉去最新的代码
切换到本地自己分支，然后git merge dev 将dev代码合并到当前分支
最后通过git status查看冲突手动解决即可
方法2：
直接在本地自己分支、输入命令【git pull 仓库地址 dev】将dev代码合并到当前分支
最后通过git status查看冲突手动解决即可
如何实现页面xxx的动画效果？
使用animate.css模块
或者CSS中transition过渡属性
如何理解js中的原型链
1；每个构造函数都有一个原型对象
2；每个原型对象都有一个指向构造函数的指针
3；每个实例函数都有一个指向原型对象的指针。
4；查找方式是一层一层查找，直至顶层。Object.prototype
图片懒加载原理
就是我们先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片举例页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可。
react和vue有哪些不同，说说你对这两个框架的看法
相同点:
· 都支持服务器端渲染
· 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范
· 数据驱动视图
· 都有支持native的方案,React的React native,Vue的weex
不同点:
· React严格上只针对MVC的view层,Vue则是MVVM模式
· virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制
· 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;
· 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的
· state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理
px和em的区别
相同点：px和em都是长度单位；
异同点：px的值是固定的，指定是多少就是多少，计算比较容易。em得值不是固定的，并且em会继承父级元素的字体大小。
浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。
JS哪些操作会造成内存泄露
1）意外的全局变量引起的内存泄露
function leak(){ leak="xxx";
2）闭包引起的内存泄露
3）没有清理的DOM元素引用
4）被遗忘的定时器或者回调
5）子元素存在引起的内存泄露
浏览器缓存有哪些，通常缓存有哪几种
http缓存
websql
cookie
localstorage
sessionstorage
flash缓存
浏览器是如何渲染页面的？
渲染的流程如下：
1.解析HTML文件，创建DOM树。
自上而下，遇到任何样式（link、style）与脚本（script）都会阻塞（外部样式不阻塞后续外部脚本的加载）。
2.解析CSS。优先级：浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式；
3.将CSS与DOM合并，构建渲染树（Render Tree）
4.布局和绘制，重绘（repaint）和重排（reflow）
CSS3新增的属性
CSS3实现圆角（border-radius），阴影（box-shadow），
对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）
transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);//旋转,缩放,定位,倾斜
增加了更多的CSS选择器 多背景 rgba
在CSS3中唯一引入的伪元素是::selection.
媒体查询，多栏布局
border-image
H5新特性
(1)新的语义标签和属性
(2)表单新特性
(3)视频和音频
(4)Canvas绘图
(5)SVG绘图
(6)地理定位
(7)拖放API
谈一下JS的继承
1.借用构造函数继承，使用call或apply方法，将父对象的构造函数绑定在子对象上
2.原型继承，将子对象的prototype指向父对象的一个实例
3.组合继承
原型链继承的缺点:
字面量重写原型会中断关系，使用引用类型的原型，并且子类型还无法给超类型传递参数。
借用构造函数（类式继承）:
借用构造函数虽然解决了刚才两种问题，但没有原型，则复用无从谈起。
组合式继承:
组合式继承是比较常用的一种继承方法，其背后的思路是使用原型链实现对原型属性和方法的继承，而通过借用构造函数来实现对实例属性的继承。这样，既通过在原型上定义方法实现了函数复用，又保证每个实例都有它自己的属性。
跨域的解决方法
前端:1.浏览器插件2.前端代理3.SONP
后端:1.声明header头2.后端代理
运维:web服务器配置
等等
谈谈你对闭包的理解
使用闭包主要是为了设置私有的方法和变量。闭包的优点是可以避免全局变量的污染，缺点是闭包会常驻内存，会增大内存使用量，使用不当很容易造成内存泄露。在js中，函数即闭包，只有函数才会产生作用域的概念
闭包有三个特性：
1.函数嵌套函数
2.函数内部可以引用外部的参数和变量
3.参数和变量不会被垃圾回收机制回收
浏览器兼容
浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。
做过哪些性能优化
1 尽量减少HTTP请求次数
2 压缩合并js
3 css精灵
4 减少DOM元素数量
5 使用CDN(网站上静态资源即css、js全都使用cdn分发，图片亦然,因为cdn拥有众多服务器，用户请求可以请求距离他近的服务器，加快速度)
6 把CSS放到顶部,把JS放到底部
7 使用gzip压缩内容(服务端)
BFC的理解
BFC，块级格式化上下文，一个创建了新的BFC的盒子是独立布局的，盒子里面的子元素的样式不会影响到外面的元素。在同一个BFC中的两个毗邻的块级盒在垂直方向（和布局方向有关系）的margin会发生折叠。
JS执行机制（浏览器运行机制）
1.JavaScript是一门单线程语言。
2.Event Loop(事件循环)是JavaScript的执行机制。
关于配置webpack的了解？
它属于一个预编译模块方案（模块打包工具），我们现在的前端代码开始分模块进行构建，则会用到import "./a.js"; 、require ("a.js"); 等方法。但是浏览器是不认识这样的方法。这时，webpack 就出现了，它采用预编译的方式，在代码加载到页面前，把这些模块引用的方式转换成浏览器可以识别的js代码。
怎么配置cli的三种环境？
1.创建环境env文件
2.修改package.json
3.vue.config.js中引用环境变量
组件的预加载，说几种方式。
1、使用import导入组件，可以获取到组件
2、使用import导入组件，直接将组件赋值给componet
3、使用require 导入组件，可以获取到组件
4、使用require 导入组件，直接将组件赋值给componet
mpvue遇到的坑
1.文件夹名字不能大写。
2.两层v-for不能用index的名字来作为索引
3.合法域名校验出错，不在以下合法域名列表中
说一下盒模型
盒模型的组成，由里向外content，padding，border，margin。
盒模型有两种标准，一个是标准模型，一个是怪异盒模型。
函数的this指向，bind call apply 的区别 bind怎么立即调用，call apply怎么延迟调用
A普通函数调用 this => window
B对象函数调用 this => 对象本身
C事件处理函数调用 this => 事件源
D定时器调用 this => window
E箭头函数中调用 this => 父function中的this 父没有function则window
F bind/apply/call this=> 用来改变this指向
区别：都用来改变this的指向，bind后函数不会执行，而只是返回一个改变了上下文的另一个函数，而call和apply是直接执行函数。若无参数，apply与call基本没什么区别
es6的新特性
1.不一样的变量声明：const和let
2.模板字符串
3.箭头函数（Arrow Functions）
4. 函数的参数默认值
5.Spread / Rest 操作符
6.二进制和八进制字面量
7.对象和数组解构
8.对象超类
9.for...of 和 for...in
10.ES6中的类
Promise是什么 和 async await的区别 async await 的底层
Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大，简单地说，Promise好比容器，里面存放着一些未来才会执行完毕（异步）的事件的结果，而这些结果一旦生成是无法改变的
区别：1 Promise的出现解决了传统callback函数导致的“地域回调”问题，但它的语法导致了它向纵向发展行成了一个回调链，遇到复杂的业务场景，这样的语法显然也是不美观的。而async await代码看起来会简洁些，使得异步代码看起来像同步代码，await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖，只有这一句代码执行完，才会执行下一句。
2 async await与Promise一样，是非阻塞的。
3 async await是基于Promise实现的，可以说是改良版的Promise，它不能用于普通的回调函数。
Echarts是什么
商业级数据图表，它是一个纯JavaScript的图标库，兼容绝大部分的浏览器，底层依赖轻量级的canvas类库ZRender，提供直观，生动，可交互，可高度个性化定制的数据可视化图表。创新的拖拽重计算、数据视图、值域漫游等特性大大增强了用户体验，赋予了用户对数据进行挖掘、整合的能力。
Echarts支持的图表：折线图（区域图）、柱状图（条状图）、散点图（气泡图）、K线图、饼图（环形图）
雷达图（填充雷达图）、和弦图、力导向布局图、地图、仪表盘、漏斗图、事件河流图等12类图表
说一下深浅拷贝
浅拷贝 shadow copy (传地址)
仅仅只拷贝对象自身，内部元素引用的其他对象只拷贝一个引用。
深拷贝 deep copy (传值)
外围和内部元素都拷贝了对象本身。而不是引用。因此深拷贝产生的副本可以随意修改，而不用担心会影响原始值。
清除浮动的几种方法
1，额外标签法，<divstyle="clear:both;"></div>（缺点：不过这个办法会增加额外的标签使HTML结构看起来不够简洁。）
2，使用after伪类
#parent:after{
content:".";
height:0;
visibility:hidden;
display:block;
clear:both;
}
3,浮动外部元素
4,设置overflow为hidden或者auto
Commonjs的理解
CommonJS是服务器端模块的规范，Node.js采用了这个规范。CommonJS规范加载模块是同步的，也就是说，只有加载完成，才能执行后面的操作
请解释什么是事件代理
事件代理（Event Delegation），又称之为事件委托。是 JavaScript 中常用绑定事件的常用技巧。顾名思义，“事件代理”即是把原本需要绑定的事件委托给父元素，让父元素担当事件监听的职务。
事件代理的原理是DOM元素的事件冒泡。使用事件代理的好处是可以提高性能。
创建ajax过程
ajax(异步javascript xml) 是什么：能够刷新局部网页数据而不是重新加载整个网页。
(1)创建XMLHttpRequest对象,也就是创建一个异步调用对象.
(2)创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息.
(3)设置响应HTTP请求状态变化的函数.
(4)发送HTTP请求.
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.
为什么HTTPS安全
因为网络请求需要中间有很多的服务器路由器的转发。中间的节点都可能篡改信息，而如果使用HTTPS，密钥在你和终点站才有。https之所以比http安全，是因为他利用ssl/tls协议传输。它包含证书，卸载，流量转发，负载均衡，页面适配，浏览器适配，refer传递等。保障了传输过程的安全性
节流防抖
节流：一段时间内，只执行一次函数
防抖：事件被触发n秒后再执行回调，如果在这n秒内又被触发，则重新计时
说一下cookie和session的区别
性能角度: cookie影响性能 h5不影响性能 h5最重要
生命周期: cookie自定义 localStorage永久、sessionStorage窗口
存储空间： cookie 4k h5 5M
主要网站设置了cookie 后期所有请求都会携带cookie 影响性能
数组的方法
1.concat() 功能：用于连接两个或多个数组，该方法不会改变现有的数组，而仅仅会返回被连接数组的一个副本。
2.join() 功能：根据指定分隔符将数组中的所有元素放入一个字符串，并返回这个字符串。
3.pop() 功能：方法用于删除并返回数组的最后一个元素。
4.shift() 功能：方法用于删除并返回数组的第一个元素。
5.unshift() 功能：向数组的开头添加一个或更多元素，并返回新的长度。
6.push() 功能：向数组的末尾添加一个或更多元素，并返回新的长度。
7.slice() 功能：可从已有的数组中返回选定的元素。该方法接收两个参数slice(start,end)，strat为必选，表示从第几位开始；end为可选，表示到第几位结束(不包含end位)，省略表示到最后一位；start和end都可以为负数，负数时表示从最后一位开始算起，如-1表示最后一位。
8.splice() 功能：向数组中添加，或从数组删除，或替换数组中的元素，然后返回被删除/替换的元素。
参数：splice(start,num,data1,data2,...); 所有参数全部可选。
9.toString() 功能：转换成字符串，类似于没有参数的join()。该方法会在数据发生隐式类型转换时被自动调用，如果手动调用，就是直接转为字符串。
10.indexOf() 功能：根据指定的数据，从左向右，查询在数组中出现的位置，如果不存在指定的数据，返回-1。该方法是查询方法，不会对数组产生改变。
11.forEach() 功能：ES5新增方法，用来遍历数组，该方法没有返回值。forEach接收的回调函数会根据数组的每一项执行，该回调函数默认有三个参数，分别为：遍历到的数组的数据，对应的索引，数组自身。
12.map() 功能：1.同forEach功能；2.map的回调函数会将执行结果返回，最后map将所有回调函数的返回值组成新数组返回。
13.filter() 功能：1.同forEach功能；2.filter的回调函数需要返回布尔值，当为true时，将本次数组的数据返回给filter，最后filter将所有回调函数的返回值组成新数组返回（此功能可理解为“过滤”）。
数组去重的方法
一、利用ES6中的 Set 方法去重
二、使用双重for循环，再利用数组的splice方法去重（ES5常用）
三、利用数组的indexOf方法去重
四、利用数组的sort方法去重（相邻元素对比法）
五、利用ES6中的Map方法去重
六、利用数组的filter方法去重
export和export default的区别？
使用上的不同
export default xxx
import xxx from './'
export xxx
import {xxx} from './'
get、post的区别
1.get传参方式是通过地址栏URL传递，是可以直接看到get传递的参数，post传参方式参数URL不可见，get把请求的数据在URL后通过？连接，通过&进行参数分割。psot将参数存放在HTTP的包体内
2.get传递数据是通过URL进行传递，对传递的数据长度是受到URL大小的限制，URL最大长度是2048个字符。post没有长度限制
3.get后退不会有影响，post后退会重新进行提交
4.get请求可以被缓存，post不可以被缓存
5.get请求只URL编码，post支持多种编码方式
6.get请求的记录会留在历史记录中，post请求不会留在历史记录
7.get只支持ASCII字符，post没有字符类型限制
优雅降级和渐进增强
渐进增强（Progressive Enhancement）：一开始就针对低版本浏览器进行构建页面，完成基本的功能，然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。
优雅降级（Graceful Degradation）：一开始就构建站点的完整功能，然后针对浏览器测试和修复。
如果用户恶意点击怎么处理
1-验证码，2-点击之后loading
小程序
小程序接口必须是https 你写的项目中是谁操作的
这个配置是公司后端/运维配置的，但是我个人对编程还是比较喜欢研究的 然后呢我就自己谷歌了一把发现就是去腾讯、阿里云申请证书，然后修改nginx配置就行。我当时用的是免费版，收费版没试过。
小程序微信登录时怎么实现的
首先通过wx.login和wx.reqeuset获取openid 然后根据API去获取用户的昵称和头像
小程序项目你做过哪些优化
一、提高页面加载速度
二、用户行为预测
三、减少默认data的大小
四、组件化方案
咱们项目开发完毕发小超过2M 如果解决
静态资源 咱们可以分离项目 放到CDN服务器上
太大了可以将一个小程序变成2个小程序 这样就是4M
然后通过声明式导航、编程式导航，点击直接跳转到另一个小程序即可。
谈谈微信小程序主要目录和文件的作用？
1 project.config.json 项目配置文件，用得最多的就是配置是否开启https校验；
2 App.js 设置一些全局的基础数据等；
3 App.json 底部tab, 标题栏和路由等设置；
4 App.wxss 公共样式，引入iconfont等；
5 pages 里面包含一个个具体的页面；
6 index.json (配置当前页面标题和引入组件等)；
7 index.wxml (页面结构)；
8 index.wxss (页面样式表)；
9 index.js (页面的逻辑，请求和数据处理等)；
谈谈wxml与标准的html的异同？
1 都是用来描述页面的结构；
2 都由标签、属性等构成；
3 标签名字不一样，且小程序标签更少，单一标签更多；
4 多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式
5 WXML仅能在微信小程序开发者工具中预览，而HTML可以在浏览器内预览;
6 组件封装不同， WXML对组件进行了重新封装;
7 小程序运行在JS Core内，没有DOM树和window对象，小程序中无法使用window对象和document对象。
请谈谈WXSS和CSS的异同？
1 都是用来描述页面的样子；
2 WXSS 具有 CSS 大部分的特性，也做了一些扩充和修改；
3 WXSS新增了尺寸单位，WXSS 在底层支持新的尺寸单位 rpx；
4 WXSS 仅支持部分 CSS 选择器；
5 WXSS 提供全局样式与局部样式
你是怎么封装微信小程序的数据请求的？
一、将所有的接口放在统一的js文件中并导出
二、在app.js中创建封装请求数据的方法
三、在子页面中调用封装的方法请求数据
小程序页面间有哪些传递数据的方法？
1 使用全局变量实现数据传递
2 页面跳转或重定向时，使用url带参数传递数据
3 使用组件模板 template传递参数
4 使用缓存传递参数
5 使用数据库传递数据
请谈谈小程序的双向绑定和vue的异同？
大体相同，但小程序直接this.data的属性是不可以同步到视图的，必须调用this.setData()方法！
请谈谈小程序的生命周期函数？
onLoad() 页面加载时触发，只会调用一次，可获取当前页面路径中的参数。
onShow() 页面显示/切入前台时触发，一般用来发送数据请求；
onReady() 页面初次渲染完成时触发, 只会调用一次，代表页面已可和视图层进行交互。
onHide() 页面隐藏/切入后台时触发, 如底部 tab 切换到其他页面或小程序切入后台等。
onUnload() 页面卸载时触发，如redirectTo或navigateBack到其他页面时。
简述微信小程序原理？
小程序本质就是一个单页面应用，所有的页面渲染和事件处理，都在一个页面内进行，但又可以通过微信客户端调用原生的各种接口；
它的架构，是数据驱动的架构模式，它的UI和数据是分离的，所有的页面更新，都需要通过对数据的更改来实现；
它从技术讲和现有的前端开发差不多，采用JavaScript、WXML、WXSS三种技术进行开发；
功能可分为webview和appService两个部分；
webview用来展现UI，appService有来处理业务逻辑、数据及接口调用；
两个部分在两个进程中运行，通过系统层JSBridge实现通信，实现UI的渲染、事件的处理等。
怎么解决微信小程序的异步请求问题？
在回调函数中调用下一个组件的函数：
app.js
success:function(info){
that.apirtnCallback(info)}
index.js
onLoad:function(){
app.apirtnCallback = res =>{console.log(res)}}
微信小程序如何实现下拉刷新？
用view代替scroll-view，设置onPullDownRefresh函数实现
webview中的页面怎么跳转回小程序？
wx.miniProgram.navigateTo({
url:’pages/login/login’+’$params’})
wx.miniProgram.switchTab({
url:’/pages/index/index’})
bindtap和catchtap的区别是什么
相同点：首先他们都是作为点击事件函数，就是点击时触发。在这个作用上他们是一样的，可以不做区分
不同点：他们的不同点主要是bindtap是不会阻止冒泡事件的，catchtap是阻值冒泡的
