面试题01

创建前/后（beforeCreate/created）。在这个阶段，Vue实例的挂载元素和数据对象都为undefined，还未初始化。在created阶段，Vue实例的数据对象已经有了，但el还未初始化。1234567
载入前/后（beforeMount/mounted）。在beforeMount阶段，Vue实例的$el和data都初始化了，但还是挂载之前为虚拟的dom节点。在mounted阶段，Vue实例挂载完成，data的数据成功渲染。
更新前/后（beforeUpdate/updated）。当data变化时，会触发beforeUpdate和updated方法。
销毁前/后（beforeDestroy/destroyed）。在执行destroy方法后，对data的改变不会再触发周期函数，说明此时Vue实例已经解除了事件监听以及和dom的绑定，但是dom结构依然存在。

link和@import的区别

1.link是XHTML标签，@import是css提供的一种方式，link除了引用css外，还可以做很多事情，定义rel连接属性

2.加载顺序的差别，页面被加载的时候，link引用的css会同时被加载，而@import引用的css要等页面都加载完才会被加载

3.兼容性，@import只有IE5以上才能被识别，而link都可以识别

4.dom 只有link可以被dom操作

setTimeout(() => {}, 0)什么时候执行

在同步任务执行完毕之后，任务对列中的异步任务才能进入主线程开始执行

隐藏元素的几种方式

display：none 不占空间，会引起回流和重绘

visibility：hidden，会引起重绘

opacity[əʊˈpæsəti]：0，会引起重绘

overflow：hidden防止溢出

position：定位到可视区域外

GET 与 POST 的区别

get请求：请求的数据会附加在url之后，以?分割URL和传输数据，多个参数用&连接

post请求：post请求把请求的数据放置在http请求包的包体中

post比get更安全

GET请求只能进行url编码，而POST支持多种编码方式。

GET请求在URL中传送的参数是有长度限制的,URL 的最大长度是 2048 个字符，而POST么有

对参数的数据类型，GET只接受ASCII字符，而POST没有限制。

GET在浏览器回退时是无害的，而POST会再次提交请求。

如何判断http请求超时

设置timeout 或try catch

https加密

HTTPS就是使用SSL/TLS协议进行加密传输

箭头函数的this

一般用于回调函数中，不可以当做构造函数，没有原型，不可以改变this指向，this永远指向外层，使用异步代码，异步的结果要马上回来，就要使用回调函数了

箭头函数没有自己的this，箭头函数的this不是调用的时候决定的，而是在定义的时候处在的对象就是它的this

箭头函数的this看外层是否有函数，如果有，外层函数的this就是内部箭头函数的this，如果没有，则this是window，

箭头函数通过call和apply调用，不会改变this指向，只会传入参数

普通函数中的this:

1. this总是代表它的直接调用者, 例如 obj.function ,那么function中的this就是obj;

2.在默认情况(非严格模式下,未使用 'use strict'),没找到直接调用者,则this指的是 window;

3.在严格模式下,没有直接调用者的函数中的this是 undefined;

4.使用call,apply,bind(ES5新增)绑定的,this指的是绑定的对象。

箭头函数中的this:

1.箭头函数会捕获其所在上下文的 this 值，作为自己的 this 值，自己本身并没有this值；
2.箭头函数的this永远指向其上下文的this，任何方法都改变不了其指向，如call(), bind(), apply()。

promise

axios封装的时候用到

js逻辑

对后端的数据进行处理，对数据进行分页

vue响应式原理

数据发生变化时，会重新对页面进行渲染

响应式布局

在实际项目中，目前使用较多的是使用媒体查询作为布局的基础，使用rem做字体的适配，用srcset来做图片的响应式，宽度可以用rem，flex等来实现响应式，使用视口单位vw/vh做响应式布局也挺多。

css中有哪些属性是可以继承的

font、color、text-align、line-height、direction

vue和jquey对比

jQuery是使用选择器（$）选取DOM对象，对其进行赋值、取值、事件绑定等操作，其实和原生的HTML的区别只在于可以更方便的选取和操作DOM对象，而数据和界面是在一起的。比如需要获取label标签的内容：$("lable").val();,它还是依赖DOM元素的值。

Vue则是通过Vue对象将数据和View完全分离开来了。对数据进行操作不再需要引用相应的DOM对象，可以说数据和View是分离的，他们通过Vue对象这个vm实现相互的绑定。这就是传说中的MVVM。

jQuery是通过DOM来控制数据，不仅笨重而且渲染数据特别麻烦，而 Vue是通过数据来控制状态，通过控制数据来控制渲染

左边固定右边自适应

左边：float：left

右边：overflow：hidden

单标签（空元素）

img、br、hr、link、input

== 和 ===的区别

==先转换类型再比较，===先判断类型再比较

vue的事件修饰符

stop：阻止冒泡

prevent：阻止默认事件

z-index

元素使用绝对定位后，使用z-index控制元素的层级关系，兄弟元素才可以

只有position为relative/absolute/fixed的元素，z-index属性才起作用。注意，是该元素本身。

typeof返回哪些数据类型

object number function boolean undefined string

检测数组类型

Array.isArray(),arr.constructor,toString.call([]),instanceof

vue通信组件

父传子：props

子传父：emit

兄弟之间可以通过vuex

vue封装一个组件

在compoents文件夹中新建一个vue文件

在main.js中全局引入，先import再注册到VUE中

接着就可以在任何页面直接使用自己定义的组件

左边定宽，右边自适应

方法一：

.left{

float:left,

width:200px

}

.right{

overflow:hidden

}

方法二：

.parent{

display: flex;

}

.parent>.box1{

width: 100px;

background-color: aqua;

}

.parent>.box2{

flex: 1;

background-color: aquamarine;

}

flex:1

就是代表均匀分配元素

flex: 1; === flex: 1 1 auto;

第一个参数表示: flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大
第二个参数表示: flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小
第三个参数表示: flex-basis给上面两个属性分配多余空间之前, 计算项目是否有多余空间, 默认值为 auto, 即项目本身的大小

两边宽度固定，中间自适应

父元素：display:flex

两边元素：定宽

中间元素：width: calc(100vw - 400px);

#dad{/*父元素不设置定位，子元素浮动*/
	width: 100vw;
	height: 30vh;
	background-color: orange;
	text-align: center;
}
#Left{
	float: left;
	width: 200px;
	height: 30vh;
	background-color: lightgreen;
}
#Center{
	float: left;
	width: calc(100vw - 400px);
	height: 30vh;
	background-color: grey;
}
#Right{
	float: left;
	height: 30vh;
	width: 200px;
	background-color: red;
}