前端面试题（四）

1.简单描述每个周期具体适合哪些场景

beforeCreate：在new一个vue实例后，只有一些默认的生命周期钩子和默认事件，其他的东西都还没创建。在beforeCreate生命周期执行的时候，data和methods中的数据都还没有初始化。不能在这个阶段使用data中的数据和methods中的方法
create：data 和 methods都已经被初始化好了，如果要调用 methods 中的方法，或者操作 data 中的数据，最早可以在这个阶段中操作
beforeMount：执行到这个钩子的时候，在内存中已经编译好了模板了，但是还没有挂载到页面中，此时，页面还是旧的
mounted：执行到这个钩子的时候，就表示Vue实例已经初始化完成了。此时组件脱离了创建阶段，进入到了运行阶段。 如果我们想要通过插件操作页面上的DOM节点，最早可以在和这个阶段中进行
beforeUpdate： 当执行这个钩子时，页面中的显示的数据还是旧的，data中的数据是更新后的， 页面还没有和最新的数据保持同步
updated：页面显示的数据和data中的数据已经保持同步了，都是最新的
beforeDestory：Vue实例从运行阶段进入到了销毁阶段，这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于可用状态。还没有真正被销毁
destroyed： 这个时候上所有的 data 和 methods ， 指令， 过滤器 ……都是处于不可用状态。组件已经被销毁了。

2.谈谈你对MVVM开发模式的理解

MVVM它就是一种前端开发的架构模式，作用就是为了让前端业务逻辑和HTML代码更加分离。它的核心思想就是把每个页面分成了M（Model数据模型）、V（View视图）、VM（ViewModel视图模型）。其中VM是核心，是M和V之间的调度者。M和V不直接关联，通过中间的VM。VM还提供了数据双向绑定功能，也就说V发生改变M也跟这边，M发生改变V也会跟这变。

3.0.01+0.02为什么不等于0.03

1、在JS内部所有的计算都是以二进制方式计算的。 所以运算 0.1+ 0.2 时要先把 0.1和 0.2 从十进制转成二进制。

2、这里要注意 0.1 和 0.2 转成的二进制是无穷的。另外在现代浏览器中是用浮点数形式的二进制来存储二进制，所以还要把上面所转化的二进制转成浮点数形式的二进制。

3、0.1+0.2 不等于 0.3 ，因为在 0.1+0.2 的计算过程中发生了两次精度丢失。第一次是在 0.1 和 0.2 转成双精度二进制浮点数时，由于二进制浮点数的小数位只能存储52位，导致小数点后第53位的数要进行为1则进1为0则舍去的操作，从而造成一次精度丢失。第二次在 0.1 和 0.2 转成二进制浮点数后，二进制浮点数相加的过程中，小数位相加导致小数位多出了一位，又要让第53位的数进行为1则进1为0则舍去的操作，又造成一次精度丢失。最终导致 0.1+0.2 不等于0.3 

4.href和src的区别

1. 当浏览器遇到href会并行下载资源并且不会停止对当前文档的处理。(同时也是为什么建议使用 link 方式加载 CSS，而不是使用 @import 方式)
2. 当浏览器解析到src ，会暂停其他资源的下载和处理，直到将该资源加载或执行完毕。(这也是script标签为什么放在底部而不是头部的原因)

5.v-if和v-for同时使用在同一个标签上的表现？

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用

6.http和https的区别

http是超文本传输协议，信息是明文传输， https则具安全性的ssl/tls加密传输协议。

1.Http和https使用完全不同的连接方法和不同的端口。前者是80，后者是443。Http连接是非常简单和无状态的；HttpS协议是由SSL/TLS+HTTP协议构建的网络协议，可用于加密传输和身份认证。它比HTTP协议更安全。

2.超文本传输协议，缩写为HTTP，是分布式、协作式和超媒体信息系统的应用层协议，是万维网数据通信的基础，也是互联网上使用最广泛的网络传输协议。HTTP最初被设计为提供一种发布和接收HTML页面的方式。

3.HTTPS协议之所以安全，是因为HTTPS协议对传输的数据进行加密，而加密过程是由非对称加密实现的。然而，HTTPS在内容传输的加密过程中使用对称加密，而非对称加密只在证书验证阶段发挥作用。

7.谈谈指令v-el的用法

可以使用v-el指令,去给这个元素注册一个缩影,方便通过所属实例的$el访问这个元素

注：HTML不区分大小写，所以v-el:someEl将转换为全小写。可以用v-el:some-el然后设置this.$el.someEl。

8.vue事务的委派

事件委托：把子节点的监听函数定义在父节点上，由父节点的监听函数统一处理多个子元素的事件

9.undefined和null的区别

1、意义不同：undefined表示变量已经声明，但是没有值；null表示空

2、数据类型不同：typeof undefined = undefined，但是typeof null=object

3、转换结果不同：undefined转数值为NaN，null转数值为0

4、产生的场景：变量被声明了但没有赋值，就等于undefined；函数没有返回值默认返回undefined；对象没有赋值的属性，该属性的值为undefined；null作为函数的参数，表示该函数的参数不是对象；null作为对象原型链的终点

10.vue项目使用组件的过程

1.定义组件(创建组件)

使用Vue.extend(options)创建，其中options和new Vue(options)时传入的那个options几乎一样，但也有点区别；
区别如下：

el不要写，为什么？ ——— 最终所有的组件都要经过一个vm的管理，由vm中的el决定服务哪个容器。
data必须写成函数，为什么？ ———— 避免组件被复用时，数据存在引用关系。
2.注册组件

a.局部注册：靠new Vue的时候传入components选项
b.全局注册：靠Vue.component(‘组件名’,组件)

3.使用组件(写组件标签)

11.vue项目使用插件的过程

1）npm install 相关插件

2）在main,js用import 引入

12.<keep-alive></keep-alive>的作用是什么

缓存组件的状态，并在再次激活组件时使用缓存。如某个组件因触发事件改变某些数据，当组件切换时，会默认回到未操作的状态。使用<keep-alive>包裹组件就可以保持组件操作后的状态。

13.Vue2和Vue3有什么区别

区别：1、vue2的双向数据绑定利用了ES5的API Object.definePropert()，而vue3中使用了es6的API Proxy；2、Vue3支持碎片，而vue2不支持；3、 Vue2使用选项类型API，而Vue3使用合成型API；4、建立数据，vue2把数据放入data属性中，而Vue3使用setup()方法；5、vue3有Teleport组件，vue2没有。

14.vue中css样式只在当前页面生效

在设置style时，会影响到其他组件样式，为避免样式共享，可在样式style标签里添加 scoped 即可

15.Vue的父组件和子组件生命周期钩子执行顺序是什么

1）. 首先是数据加载渲染到页面，包括初始化阶段和挂载阶段
Vue实例化（new Vue()）-> 父组件beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 真实DOM挂载完毕 -> 子组件 mounted -> 父组件 mounted

2）. 其次当data里的数据发生了变化，进入更新阶段
父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated -> 获取更新后的真实DOM

3）. 最后当$destroy()被调用进入销毁阶段
父组件 beforeDestroy -> 子组件 beforeDestroy -> 实例销毁后 -> 子组件 destroyed -> 父组件 destroyed
16.什么是跨域请求，怎么解决

跨域指的是从一个域名去请求另外一个域名的资源。即跨域名请求！跨域时，浏览器不能执行其他域名网站的脚本，是由浏览器的同源策略造成的，是浏览器施加的安全限制。

办法：

（1）在Vue中最推荐的是CORS，全称为 Cross Origin Resource Sharing（跨域资源共享）。

这种方案对于前端来说没有什么工作量，和平时发请求写法上没有任何区别，工作量基本都在后端这里，使用CORS前端不需要配置proxytable。

每一次请求，浏览器必须先以 OPTIONS 请求方式发送一个预请求，从而获知服务器端对跨源请求所支持 HTTP 方法。在确认服务器允许该跨源请求的情况下，以实际的 HTTP 请求方法发送那个真正的请求。

（2）vue cli30修改配置信息需要新建vue.config.js文件，在module.exports方法的devServer对象中proxy 选项来添加代理配置，当前端没有匹配到当前路由时就会被代理到服务器接口地址。

注意：以上面试题皆是面试时遇到的，答案是网上查到，可能不完整，可自行搜索