20200331面试总结二

题目

16、箭头函数和普通函数区别
17、v-if和v-show区别
18、vue拦截器
19、跨域怎么解决
20、jsonp原理
21、双向数据绑定原理
22、vue路由是什么
23、vue页面之间传参
24、绝对定位和相对定位区别
25、管理代码的工具
26、清除浮动方法
27、简述盒模型
28、行内元素和块级元素区别
29、css优先级
30、link和@import区别

解析

16、

一.外形不同：
	箭头函数使用箭头定义，普通函数中没有。
二.箭头函数全都是匿名函数：
	普通函数可以有匿名函数，也可以有具名函数。
三.箭头函数不能用于构造函数：
	普通函数可以用于构造函数，以此创建对象实例。
四.箭头函数中this的指向不同：
	在普通函数中，this总是指向调用它的对象或者，如果用作构造函数，它指向创建的对象实例。
五.箭头函数不具有arguments对象：
	每一个普通函数调用后都具有一个arguments对象，用来存储实际传递的参数。
	但是箭头函数并没有此对象。
六.其他区别：
	（1）箭头函数不能Generator函数。
	（2）箭头函数不具有prototype原型对象。
	（3）箭头函数不具有super。
	（4）箭头函数不具有new.target。

17、

 1. v-show 只是简单的控制元素的 display 属性，而 v-if 才是条件渲染（条件为真，元素将会被渲染，条件为假，元素会被销毁）
 2.  v-show 有更高的首次渲染开销，而 v-if 的首次渲染开销要小的多
 3. v-if 有更高的切换开销，v-show 切换开销小
 4. v-if 有配套的 v-else-if 和 v-else，而 v-show 没有5. v-if 可以搭配 template 使用，而 v-show 不行

18、

拦截器分为请求拦截器和响应拦截器两种。
1. 请求拦截器
请求拦截器的作用是在请求发送前进行一些操作，例如在每个请求体里加上token，统一做了处理如果以后要改也非常容易。
2. 响应拦截器
响应拦截器的作用是在接收到响应后进行一些操作，例如在服务器返回登录状态失效，需要重新登录的时候，跳转到登录页。

19、

1、 通过jsonp跨域
2、 document.domain + iframe跨域
3、 location.hash + iframe
4、 window.name + iframe跨域
5、 postMessage跨域
6、 跨域资源共享（CORS）
7、 nginx代理跨域
8、 nodejs中间件代理跨域
9、 WebSocket协议跨域

20、

jsonp原理是动态创建script标签利用其中的src属性可以访问跨域的js脚本，的特性，返回一段调用某个函数的js代码，在src中进行了调用，实现跨域。

21、

vm的核心是view 和 data 
当data 有变化的时候它通过Object.defineProperty(）方法中的set方法进行监控，并调用在此之前已经定义好data 和view的关系了的回调函数，来通知view进行数据的改变
而view 发生改变则是通过底层的input 事件来进行data的响应更改
vue是通过Object.defineProperty()来实现数据劫持的。

22、

vue路由就是指vue-router，其中router是指根据url分配到对应的处理程序，所以说路由就是用来解析URL以及调用对应的控制器并返回从视图对象中提取好的网页代码给web服务器，最终返回给客户端

23、

1、 this.$router.push进行编程式路由跳转
2、 router-link 进行页面按钮式路由跳转
3、 this.$route.params获取路由传递参数
4、this.$route.query获取路由传递参数
5、 params 和 query 都是传递参数的，params不会在url上面出现，并且params参数是路由的一部分，是一定要存在的 query则是我们通常看到的url后面的跟在？后面的显示参数

24、

position: absolute;绝对定位：绝对定位是相对于元素最近的已定位的祖先元素（即是设置了绝对定位或者相对定位的祖先元素）。如果元素没有已定位的祖先元素，那么它的位置则是相对于最初的包含块（body）。
绝对定位本身与文档流无关，因此不占空间，普通文档流中的元素的布局就当绝对定位的元素不存时一样，所以 它们可以覆盖页面上其他的元素，且可以通过z-index属性来控制这些层的对方顺序。

position: relative;相对定位：相对定位是相对于元素在文档中的初始位置——首先它出现在它所在的位置上（即不设置position时的位置，然后通过设置垂直或水平位置，让这个元素“相对于”它的原始起点进行移动；
注意，在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。

25、git

26、

1.给父级元素单独定义高度。
2.在标签结尾处加空div标签 clear:both。
3.父级div定义 伪类:after 和 zoom。
4.父级div定义 overflow:hidden

27、

CSS盒子模型也叫做框模型，具备内容(content)、填充(padding)、边框(border)、边界(margin)这些属性。在CSS中，每一个元素都被视为一个框，而每个框都有三个属性：

border:元素的边框（可能不可见），用于将框的边缘与其他框分开；
margin：外边距，表示框的边缘与相邻框之间的距离，也称为页边空白；
padding:内边距，表示框内容和边框之间的空间。

width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

因此，如果在一个具有边框的元素中放置文本，往往需要设置一些内边距，以便文本的边缘不要接触边框，这样更便于阅读。而外边距则可以在多个元素框之间创建空白，避免这些框都挤在一起。因此，在设计页面时，经常会使用padding属性和margin属性来设置页面的布局。但是，必须注意的是，一旦用了padding属性或者margin属性设置了元素的边距以后，会增加元素在页面布局中所占的面积。

28、

行内元素：　　
	与其他行内元素并排
	不能设置宽高，默认的宽度就是文字的宽度
块级元素：
	独占一行，不能与其他任何元素并列。
	能接受宽高，如果不设置宽度，那么宽度将默认变为父级的100%。

29、!important > 行内样式 > ID > 类、伪类、属性 > 标签名 > 继承 > 通配符
30、

1.从属关系区别
@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等。

2.加载顺序区别
加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载。

3.兼容性区别
@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。

4.DOM可控性区别
可以通过 JS 操作 DOM ，插入link标签来改变样式；由于 DOM 方法是基于文档的，无法使用@import的方式插入样式。

5.权重区别(该项有争议，下文将详解)
link引入的样式权重大于@import引入的样式。