个人面试知识点，在掘金总结了很多人得博客，个人笔记向-CSDN博客

简单得介绍一下Vue？

vue.js是一个用户创建WEB交互界面得库.

他让你通过简单的操作api创建数据驱动的ui组件.

同时他也是一个声明式，组件式框架.
复制代码

说一说Vue的生命周期

beforeCreate、created、
beforeMount、mounted、
beforeUpdate、updated、
beforeDestroy、destroyed
创建=>挂载=>更新=>销毁
所以vue的组件也是有生命周期的，四个阶段，八个钩子
beforeCreate
	千万不要去修改data数据 最早也要放在created里面去做
	在实例化初始之后 实例初始化 new vue（）
	在实例初始化之后，数据观测和暴露了一些有用的实例属性与方法。
created
	是一个template编译的过程 结果是解析成了render函数
复制代码

Vue组件间通信

组件通信得几种方式
	子传父 父传子  兄弟组件传递  爷孙组件传递（隔代组件）
1.props
	通过一般属性传递 父传子
	通过函数属性实现子传父
	缺点：隔代属性比较麻烦
2.自定义事件函数
	子组件向父组件通信
	绑定监听@xxx='xxx'
	this.@emit('xx',data)	
3.slot
	专门实现父子传递得数据标签
4.vuex
	专门做状态管理得库（一个大的面试点！！！）
5.pubsub(消息订阅和发布)
	我通常使用pubsub.js
		订阅：pubsub.subscribe('xxx',fun(名字,data){})
		发布：pubsub.publish('名字',data)	
	优点随意传递 随意关系得传递
复制代码

Vuex是什么？

Vuex是一个专门为Vue.js应用程序开发的状态管理模式

它采用集中式存储管理应用得所有组件得状态

并以相应的规则保证状态以一种可预测的方式发生变化
复制代码

Vuex应用场景

Vuex只能用于单个页面中不同组件得数据流通（组件件数据传递）
复制代码

Vuex基础概念

State是什么
	vuex得单一状态树
	state是vuex自己维护的一份状态数据，数据得格式需要根据业务去设计
Getters
	getters属性主要是对state中数据得一种过滤，属于一种加强属性
Actions
	对于store中数据得操作动作在action中提交
	action和mutation类似 但是action提交时mutation并不直接修改数据	
Mutations
	更改VueX得store中得状态得唯一方式是提交mutation 
	mutation只能执行同步操作
Module模块化
	业务逻辑得增多可以使用模块话得方式使代码清晰整洁
复制代码

vue-router是什么？

路由就是SPA（单页应用）得路径管理器

路由模块得本质就是建立起url和页面之间得映射关系

传统页面是靠a标签进行跳转 但是vue中不可以这样 因为vue只有一个主

的index.html 所以必须使用vue-router进行管理
复制代码

Vue-router实现原理

SPA单一页面应用程序 只有一个完整的页面 他在加载时不会加载整个页面
知识更新某个指定容器中的内容
复制代码

Hash模式

Vue-router默认hash模式 使用url的hash来模拟一个完整的URL 于是当URL改变时 页面不会重新加载 hash（#）是url锚点 代表的是网页中的一个位置  改变#后的部分 只会滚动到相应位置 不会重新加载网页 也就是用来指导浏览器动作的 所以说hash模式通过锚点值得改变 渲染制定dom位置不同得数据
复制代码

History模式

由于hash模式会在url中自带# 如果不想要很丑得hash 可以用路由得history模式  只需要在配置路由规则时 加入mode:history 就可以用Api来完成URL跳转而无需重新加载页面
复制代码

跳转方式

方式一 直接修改地址

方式二 this.$router.push('路由地址')

方式三 <router-link to='路由地址'></router-link>
复制代码

vue-router 使用方式

1. 下载
2. 在main中引入
3. 安装插件 vue。use
4. 创建路由对象 并且配置路由规则
5. 在app.vue中留坑  <router-view>
复制代码

vue-router如何传递参数

1.用name传递参数
2.通过router-link标签中的to传参
3.利用url传递参数 在配置文件以冒号形式设置参数
复制代码

vue-router跳转方法

1. .go跳转到上一次浏览的页面
2. .replace指定跳转地址
3. .replace{name}跳转到指定名字下  #不可以退回
4. .push通过push进行跳转   #可以后退
5. push（name）同3
6. 404 是*地址
复制代码

vue-router导航卫士

全局守卫 
1 router.beforeEach全局前置守卫 进入路由之前

2 router.beforResolve全局就解析首位 在beforerouteenter调用之后

3 router.afterEach全局后置钩子 进入路由之后
复制代码

to from next这三个参数

 to和from 是将要进入和将要离开的路由对象 路由对象指的是平时通过this.route获取到的路由对象
 
 next是一个函数 且必须调用 否则不能进入路由（页面空白）
 
next 进入该路由

next（false） 取消进入 url地址重置为From路由地址

beforeEnter: (to, from, next) => { 

// 参数用法什么的都一样,调用顺序在全局前置守卫后面，所以不会被全局

守卫覆盖

// ...

}	
复制代码

路由组件内的守卫：

beforeRouteEnter 进入路由前

beforeRouteUpdate (2.2) 路由复用同一个组件时

beforeRouteLeave 离开当前路由时
复制代码

说一说keep-alive

是用来缓存组件内部状态 避免重新渲染 是一个抽象组件 他自身不会
渲染一个Dom元素 也不会出现在父组件链中 
主要用于保留组件状态或避免重新渲染
复制代码

生命周期钩子

activated和deactivated
activated在组件第一次渲染时会被调用
，之后在每次缓存组件被激活时调用。
deactivated：组件被停用(离开路由)时调用
使用了keep-alive就不会调用beforeDestroy(组件销毁前钩子)
和destroyed(组件销毁)，因为组件没被销毁，被缓存起来了。
复制代码

新增属性

include：匹配的 路由 组件 会被缓存
exclude 匹配的 路由 组件 不会被缓存
include和exclude支持三种方式来有条件的缓存路由：
采用逗号分隔的字符串形式，正则形式，数组形式。
当你缓存了组件之后 再次进入beforeCreate created beforemounted

mounted  如果想使用 使用activated钩子和destoyed钩子使用
复制代码

什么是ES6

ES6是新一代js语言标准 新增了一些js原生方法 使js使用更加规范 更加优雅
复制代码

ES5,ES6有什么区别

  ES2015特指在2015年发布的新一代JS语言标准
  ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等
  现阶段在绝大部分场景下，ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。
复制代码

了解babel吗有什么作用

babel是一个ES6转码器 可以将代码转为ES5代码 以便兼容那些还没支持ES6得平台
复制代码

let有什么用有了var 为什么还要使用let

let 声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。
复制代码

箭头函数

箭头函数没有自己得this this总是指向他的上一层this
箭头函数不能用作构造函数 因为它没有自己的this 无法实例化
复制代码

双冒号运算符用来取代 bind call和apply

foo：：bar

symbol是什么

symbol是ES6引入得第七种原始数据类型 symbol属性不能被for。。。in遍历
也不是私有属性
复制代码

set是什么

set是ES6引入得一种类似Array得新的数据结构 Set实例得成员类似于数组得item成员 区别就是 数组去重   数组中元素不重复
复制代码

Map是什么

是一种类似obj得新的数据结构
复制代码

promise是什么

promise是ES6引入得一个新的对象 他的主要作用是用来解决Js异步机制例得
回调地狱 只是封装了异步回调 使得异步回调写的更加优雅 可读性更高
let promise=new promise((resolve,reject)=>{
	let promise
	if(xx){}else{}
	promise.then(respone=>{
		xxx
	}).catch(error=>{
		xxx
	})
})
复制代码

适配问题

基础：rem和vw适配方案
因为设计稿通常使用750px
复制代码

rem适配

用rem可以随着跟字体大小改变而改变 从而实现自适应得功能可以让我们
直接在设计上使用PX  
利用viewport适配
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
1.利用插件postcss
他可以自动将16px转为1rem 可以不用自己计算
2.利用postcss-pxtorem
将px转换成对应得rem 然后用js代码动态算根目录应该有的字体大小
复制代码

移动端问题

1.点击延迟300ms延迟问题
	使用fastClick来解决
	安装 fastClick 
		npm install fastclick
	在main.js中引用fastclick和初始化它
	 import FastClick from 'fastclick';引入插件
	 FastClick.attach(document.body);使用fastclick
2.1px问题
	只发生在安卓系统上 ios自带flexible会根据设备分辨率调整
	viewport得宽和scale来达到目的
	解决方法		
	```
	function retina () { // 高分辨率屏幕处理
		if (navigator.userAgent.toUpperCase().indexOf('IPHONE OS') !== -1) return; // IOS会缩放，不处理
		var classNames = [];
		var pixelRatio = window.devicePixelRatio || 1;
		classNames.push('pixel-ratio-' + Math.floor(pixelRatio));
		if (pixelRatio >= 2) {
		    classNames.push('retina');
		}
		var html = document.getElementsByTagName('html')[0];
		classNames.forEach(function (className) {
		    html.classList.add(className);
		});
		}
	```
复制代码

从url地址到最终页面渲染完成发生了什么呢？

1.dns解析 将域名解析为IP地址
	-浏览器DNS缓存
	-系统DNS缓存
	-路由器缓存
	-网络运营商得DNS缓存
	-递归搜索
2.TCP三次握手
	第一次握手 
		是由浏览器发起的，用来告诉服务器我要发送请求
	第二次握手
		是由服务器发起，告诉浏览器我准备接受了，你发吧
	第三次握手
		是由浏览器发起得，告诉浏览器我马上发了，准备接受吧
3.发送请求
	-请求报文，HTTP协议得通信内容
4.接受响应
	-响应报文
5.渲染页面
	-遇见HTML标记 调用HTML解析器 解析对应得token标记，构成DOM树
	-遇见style/link标记 浏览器会调用css解析器，处理并声称cssdom树
	-遇见script标记 调用javascript解析器 处理script代码（绑定事件，修改dom/css树）
	-将DOM和CSSOM树合并成一个渲染树
	-根据渲染树计算布局（布局）
	-将各个节点颜色绘制到屏幕上（渲染）
	注意：这几个步骤 不一定按照顺序执行 可能会反复多次执行如果dom和css树被修改了 可能会执行多次
6.断开连接（TCP四次挥手）
	第一次挥手
		由浏览器发起，发送给服务器，我发送完了（请求报文），你准备关闭吧
	第二次挥手
		由服务器发起，我东西接受完了（请求报文） 我准备关闭了你也准备把
	第三次挥手
		由服务器发起，告诉浏览器我发送完毕，你准备关闭吧，这里指的响应报文
	第四次挥手
		由浏览器发起，告诉服务器 我东西发完了 我准备关闭了你也准备吧
	--先关服务器 在关浏览器	
复制代码