前端面试五

1.谈谈你对vue中scope的理解

作用：让样式只在本组件中生效，不会影响其他的组件

原理：给组件的节点新增自定义属性,然后CSS根据属性选择器添加样式

2.组件之间的传值有哪些？

常见的传值方式有父向子传值，子向父传值，兄弟组件之间传值

兄弟组件之间是如何传值的?先创建一个事件总线EventBus,兄弟组件通过$emit触发自定义事件,$emit第二个参数为传递的值,另外一个兄弟组件通过$on监听自定义事件

provide和inject是怎样传值的？在组先组件定义provide属性,返回传递的值,在后代组件通过inject接收组件传递过来的值

复杂关系的组件数据传递可以通过vuex来传递。

3.谈谈你对vue的理解？

vue是一个用于构建用户界面的渐进式JavaScript框架,vue的核心特性是数据驱动视图以及组件化开发思想,由于vue是基于MVVM思想的双向绑定，让我们可以减少对dom元素的频繁操作，直接在数据层和视图层建立一种联系,并且它通过组件化的开发思想，增加了代码的可复用性，可维护性，提高了开发效率

4.new操作符主要做了些什么？

1. 首先创建了一个新的空对象
2. 设置原型，将对象的原型设置为函数的原型对象。
3. 让函数的this指向这个对象
4. 判断函数的返回值类型，如果是值类型，返回创建的对象。如果是引用类型，就返回这个引用类型的对象。

5.怎么理解重绘和回流？

重绘:当给一个元素更换颜色、更换背景，虽然不会影响页面布局，但是会重新渲染页面，这就是重绘。

回流：当增加或删除dom节点，或者给元素修改宽高时，会改变页面布局，那么就会重新构造dom树然后重新进行渲染，这就是回流。

有重绘不一定有回流, 有回流就一定有重绘

如何减少回流和重绘呢？

1.使用 transform 替代 top    2.使用 visibility 替换 display: none ，因为前者只会引起重绘，后者会引发回流（改变了布局） 3.避免使用table布局，可能很小的一个小改动会造成整个 table 的重新布局.     4.避免使用CSS表达式，可能会引发回流.  5.避免频繁操作样式，最好一次性重写style属性，或者将样式列表定义为class并一次性更改class属性.

6.什么是http?http和https的区别？

http 是超文本传输协议，信息是明文传输，HTTPS 协议要比 http 协议安全，https 是具有安全性的 ssl 加密传输协议，可防止数据在传输过程中被窃取,确保数据的完整性

http协议的默认端口为 80，https 的默认端口为 443。

http 的连接很简单，是无状态的。https阶段比较费时，会使页面加载时间延长 。

https缓存不如http 高效，会增加数据开销。

Https 协议需要 ca 证书，费用较高。

7.平时做过哪些优化？

减少http请求次数、打包压缩上线代码、使用懒加载、使用雪碧图、动态渲染组件、CDN加载

8.图片懒加载是怎么实现的？

1.就是我们先设置图片的data-set属性值为其图片路径。然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图片距离页面顶端的坐标Y（相对于整个页面，而不是浏览器窗口）小于前两者之和，就说明图片就要显示出来了（合适的时机，当然也可以是其他情况），这时候我们再将 data-set 属性替换为 src 属性即可

2.通过浏览器提供的Intersectionobserver对象创建一个实例，调用实例的observe方法可以观测 某个img元素，在Intersectionobserver的参数回调里面可以通过isIntersecting属性来判断img元素是否进入到了可视区,如果进入就把img元素的属性给真正的src属性。

9.Vue的修饰符有哪些？

1.表单修饰符:  lazy(光标离开的时候才进行赋值)   trim（清除空格） number（输入的转换成数字）

2.事件修饰符: stop(阻止冒泡)  prevent (阻止默认行为)    once（绑定了事件以后只能触发一次，第二次就不会触发）native(绑定原生事件)

3.键盘修饰符 enter tab esc

10.Vue中组件和插件有什么区别？

组件就是把图形、非图形的各种逻辑均抽象为一个统一的概念（组件）来实现开发的模式，在vue中每一个.vue文件都可以视为一个组件

插件通常用来为vue添加全局功能。插件的功能范围没有严格的限制

两者之间的区别主要是:编写形式,注册形式,使用场景

编写形式:1.编写一个组件，可以有很多方式，我们最常见的就是vue单文件的这种格式，每一个.vue文件我们都可以看成是一个组件

2.vue插件的实现应该暴露一个 install方法。这个方法的第一个参数是vue构造器，第二个参数是一个可选的选项对象

注册形式:1.全局注册通过vue.component方法，第一个参数为组件的名称，第二个参数为传入的配置项

2.插件的注册通过vue.use()的方式进行注册，第一个参数为插件的名字，第二个参数是可选择的配置项

11.你有写过自定义指令吗？自定义指令的应用场景有哪些?

全局注册主要是通过vue.directive方法进行注册

1.表单阻止重复提交,做一些节流的处理  2.图片的懒加载 把src标签替换成v-lazy自定义指令

12.怎么实现ajxa?

1.创建ajxa的核心对象XmlHttpRequest对象

2.通过XmlHttpRequest对象的open()方法与服务端建立连接

3.构建请求所需的数据内容，并通过XmlHttpRequest对象的send(要发送的数据)方法发送给服务器端

4.通过XmlHttpRequest对象提供的事件监听服务器端你的通信状态

5.接受并处理服务端向客户端响应的数据结果

6.将处理结果更新到页面中

13.父子组件执行的生命周期？

执行顺序：父组件先创建，然后子组件创建；子组件先挂载，然后父组件挂载.

父beforeCreate -> 父created -> 父beforeMount -> 子beforeCreate -> 子created -> 子beforeMount -> 子mounted -> 父mounted->父beforeUpdate->子beforeUpdate->子updated->父updated->父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

14.路由传参有那几种传参方式？

最简单的 path+query 传参，刷新页面会保留传参，但是会显示在 url 上。 第二种 name+params 传参，刷新页面不会保留传参，不会显示在 url 上。 第三种动态传参，跳转的时候直接写在跳转的路径上，但是需要 router 里进行配置。用的也是 params，刷新页面数据会保存。

页面跳转用this.$router,获取路由参数用this.$route.query.id/this.$route.params.id.

15.vue中路由两种模式的区别？

路由有hash和history两种模式：

1.hash模式的实现原理是通过监听hashChange事件来实现的。history模式是通过调用 history.pushState方法并且监听popstate事件来实现的,监听popstate事件是为了响应浏览器的前进后退功能。

2.hash模式会在地址栏中有#号，而history模式没有更加美观

3.history模式需要服务器端做额外的配置,所以需要后端的配合,否则会出现刷新白屏.原因是页面刷新时，浏览器会向服务器发送请求，发现文件资源不存在，所以就报404。处理方式就由后端做一个保底映射:所有的请求全部拦截到index.html上。