面试记录七月

面试记录：

面试问题的一些记录，方便后期复盘

---

问题1：说一下router、route、routes

1.route，表示一条路由信息。

{ path: '/home', component: Home }

2.routes，表示一组路由信息。

const routes = [
  { path: '/home', component: Home },
  { path: '/about', component: About }
]

3.router
router可以理解为一个容器，或者说一种机制，它管理了一组route。简单来说，route只是进行了URL和函数的映射，而在当接收到一个URL之后，去路由映射表中查找相应的函数，这个过程是由router来处理的。

问题2：watch和computer的区别？

computed：计算属性，依赖其他属性值，并且computed的值有缓存，只有他依赖的属性值发生改变，下一次获取computed的值时才会从新计算computed的值
watch：更多的是一个观察的作用，类似于某些数据的监听回调，每当监听的数据发生变化时都会执行回调进行后的操作
运用场景：
computed：当我们需要进行数值计算，并依赖其他数据时，应该使用computed，利用其缓存特性，避免每次获值时，都要重新计算
watch：当需要在数据变化时执行异步或开销较大的操作是，应该使用watch，它允许我们执行异步操作，限制我们执行该操作的频率

问题3：Vue组件如何在首次加载时就触发watch监听？

watch里面添加deep：true开启深度监听

问题4：父子组件的钩子函数的喧染顺序？

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

问题5：Vue的生命周期钩子函数有哪些？

Vue中实例从创建到销毁的过程就是生命周期，即指从创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程

Vue生命周期总共可以分为8个阶段：创建前后, 载入前后,更新前后,销毁前销毁后

生命周期	描述
beforeCreate	执行时组件实例还未创建，通常用于插件开发中执行一些初始化任务
created	组件初始化完毕，各种数据可以使用，常用于异步数据获取
beforeMount	未执行渲染、更新，dom未创建
mounted	初始化结束，dom已创建，可用于获取访问数据和dom元素
beforeUpdate	更新前，可用于获取更新前各种状态
updated	更新后，所有状态已是最新
beforeDestroy	销毁前，可用于一些定时器或订阅的取消
destroyed	组件已销毁，作用同上

问题6：hash和history路由的区别？哪个更安全？

区别：
1、hash路由在地址栏URL上有“#”，而history路由没有；
2、进行回车刷新操作时，hash路由会加载到地址栏对应的页面，而history路由一般会出现404错误；
3、hash支持一些低版本的浏览器，而history不支持。
history更安全，因为hash在URL上会携带请求参数

问题7：Vuex有哪五个属性？如何修改state值？

属性：State、Action、Mutation、Model、Getter
action内通过commit提交mutation方法修改state

问题8：v-if和v-for为什么不建议一起使用？

v-if:指令用于条件性地渲染一块内容
v-for:指令基于一个数组来渲染一个列表
v-for优先级是比v-if高
为什么不要把 v-if 和 v-for 同时用在同一个元素上，因为会带来性能方面的浪费（每次渲染都会先循环再进行条件判断）
如果避免出现这种情况，则在外层嵌套template（页面渲染不生成dom节点），在这一层进行v-if判断，然后在内部进行v-for循环
如果条件出现在循环内部，可通过计算属性computed提前过滤掉那些不需要显示的项

问题9：怎么理解v-if,v-show？

v-if有更高的切换消耗(Dom重新渲染)；v-show有更高的初始渲染消耗(样式的显隐)；
v-if会触发生命周期；v-show不会触发生命周期

问题10：keep-alive的作用？它有哪两个钩子函数？说一说include、exclude的作用？

keep-alive是vue中的内置组件，能在组件切换过程中将状态保留在内存中，防止重复渲染DOM
钩子函数：actived、deactived
include - 字符串或正则表达式。只有名称匹配的组件会被缓存
exclude - 字符串或正则表达式。任何名称匹配的组件都不会被缓存

问题11：Vue2、Vue3的区别？

vue3比vue2速度更快、体积更小、更易维护、基于ts编写、新增了部分特性

问题12：浏览器的缓存有哪些？

强制缓存、协商缓存

问题13：cookie、localStorage、session的区别？如何清除cookie？

三者存储容量不同；cookie服务器生成；localStorage浏览器缓存；session当前窗口有效
浏览器直接清除cookie

问题14：Vue中为什么要设置key值？

key的作用主要是为了高效的更新虚拟DOM；
当Vue用 v-for 正在更新已渲染过的元素列表是，它默认用“就地复用”策略

问题15：Vue中你做过哪些性能优化？

1、加载优化:
减少HTTP请求、缓存资源、压缩合并css、js代码、首屏加载、按需加载、预加载、懒加载、延迟加载、压缩图像、减少Cookie、避免重定向、异步加载第三方资源、使用CND托管常用的库和框架、启用浏览器缓存

2、执行加载:
CSS写在头部，JS写在尾部并异步、避免img、iframe等的src为空、尽量避免重置图像大小、图像尽量避免使用DataURL

3、渲染加载:
设置viewport、减少DOM节点、优化动画、优化高频事件、GPU加速

4、样式优化:
避免在HTML中书写style、避免CSS表达式、移除CSS空规则、正确使用display：display、不滥用float等

5、脚本优化:
减少重绘和回流、缓存DOM选择与计算、缓存.length的值、尽量使用事件代理、尽量使用id选择器、touch事件优化.

问题16：项目排期很紧，人力不够你如何安排？

问题17：拿到设计稿，如何快速还原设计稿？

问题18：介绍一下你认为做的最好的项目？

问题19：项目中遇到过什么问题？如何解决？