亚信科技前端实习面试题

一、Vue的生命周期

分为四个阶段：

1. 实例创建
2. DOM渲染
3. 数据更新
4. 销毁实例

共有八个生命周期函数：

1.beforeCreate —创建前
触发行为：vue挂载的$el和data都为undefined，还未初始化
在此阶段可以做的事情：加loading事件
2.created —创建后
触发行为：vue的数据对象data已经有数据了，$el还没有初始化
在此阶段可以做的事情：解决loading，请求ajax数据为mounted做准备
3.beforeMount --渲染前
触发的行为：vue实例和$el都初始化了，但还是虚拟的DOM节点
此阶段可以做的事情：也可以发请求拿数据
4.mounted —渲染后
触发的行为：vue实例挂载完成，页面以已经成功渲染
在此阶段可以做的事情：配合路由钩子函数使用
5.beforeUpdate —更新前
触发的行为：data更新前触发
6.updated —更新后
触发的行为：data更新前触发
在此阶段可以做的事情：数据更新时，做一些处理（此处也可以用watch进行观测）
7.beforeDestroy —销毁前
触发的行为：组件销毁前触发
在此阶段可以做的事情：可向用户询问是否销毁
8.destroyed —销毁后
触发的行为：组件销毁时触发，vue实例解除了事件监听和dom的绑定，但是dom阶段还存在
在此阶段可以做的事情：组件销毁进行提示

二、v-if和v-show的区别

1.都能动态控制元素的显示与隐藏
2.v-if是动态添加或删除整个DOM元素，v-if是为该元素添加display:none和block,DOM元素依旧还在
3.v-if切换有一个局部编译/卸载的过程，切换过程中合适的销毁和重建内部事件监听和子组件，v-show只是简单的进行css的切换
4.v-if是惰性的，如果条件为假，则什么都不做，只有条件第一次为真的时候才开始局部编译，v-show是任何条件下都被编译，然后被缓存，而且DOM元素保留
5.v-if有更高的切换消耗，v-show有更高的初始渲染消耗

三、vue2.0和vue3.0的区别

1.数据双向绑定原理发生了改变。
vue2.0使用的是Object.defineProperty数据劫持结合订阅者发布者实现的，vue3.0使用的是ES6的proxy实现的
2.vue2.0仅支持一个根节点，vue3.0支持多个根节点
3.声明周期函数不同，且vue3.0使用钩子函数需要先引入
vue2--------------vue3
beforeCreate -> setup()
created -> setup()
beforeMount -> onBeforeMount
mounted -> onMounted
beforeUpdate -> onBeforeUpdate
updated -> onUpdated
beforeDestroy -> onBeforeUnmount
destroyed -> onUnmounted
activated -> onActivated
deactivated -> onDeactivated
4.data和method和声明位置不一样。
vue2.0data和method是单独模块
vue3.0是都声明在setup函数中

四、输入一个url发生了什么

1.DNS域名解析(通过域名解析出IP)
2.建立TCP连接(根据域名和默认端口80和服务器建立连接)
3.浏览器读取文件(URL中域名后面部分对应文件)的HTTP请求，该请求消息作为TCP三次握手的第三个报文数据发给服务器(SYN敲门 SYN+ACK回应 ACK同意进门)
4.浏览器做出响应，并把对应的html文本发送给浏览器
5.释放TCP连接
6.浏览器解析html
7.浏览器解析html生成htmlDOM树
8.解析css生成cssDOM树
9.合并htmlDOM树和cssDOM树生成渲染树
10 布局和绘制，重绘和回流

五、隐藏一个元素的几种方法

1. display:none
2. opacty:0
3. z-index进行覆盖
4. visible:hidden

六、数组循环的几种方法

1.forEach
2.for in
3.for of
4.for循环
5.map