亚信科技前端实习面试题_亚信前端实习面试题

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文本发送给浏览器

这里分享一份由字节前端面试官整理的「2021大厂前端面试手册」，内容囊括Html、CSS、Javascript、Vue、HTTP、浏览器面试题、数据结构与算法。全部整理在下方文档中，共计111道

HTML

• HTML5有哪些新特性？

• Doctype作⽤? 严格模式与混杂模式如何区分？它们有何意义?

• 如何实现浏览器内多个标签页之间的通信？

• ⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？⾏内元 素和块级元素有什么区别？

• 简述⼀下src与href的区别？

• cookies,sessionStorage,localStorage 的区别？

• HTML5 的离线储存的使用和原理？

• 怎样处理 移动端 1px 被 渲染成 2px 问题？

• iframe 的优缺点？

• Canvas 和 SVG 图形的区别是什么？

JavaScript

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

• 问：0.1 + 0.2 === 0.3 嘛？为什么？

• JS 数据类型

• 写代码：实现函数能够深度克隆基本类型

• 事件流

• 事件是如何实现的？

• new 一个函数发生了什么

• 什么是作用域？

• JS 隐式转换，显示转换

• 了解 this 嘛，bind，call，apply 具体指什么

• 手写 bind、apply、call

• setTimeout(fn, 0)多久才执行，Event Loop

• 手写题：Promise 原理

• 说一下原型链和原型链的继承吧

• 数组能够调用的函数有那些？

• PWA使用过吗？serviceWorker的使用原理是啥？

• ES6 之前使用 prototype 实现继承

• 箭头函数和普通函数有啥区别？箭头函数能当构造函数吗？

• 事件循环机制 （Event Loop）