2024年最全Vue最全知识点《基础到进阶，覆盖vue3(2)，2024年最新前端研发岗必问30+道高级面试题

最新推荐文章于 2024-07-08 18:51:22 发布

2401_84435866

最新推荐文章于 2024-07-08 18:51:22 发布

阅读量681

点赞数 10

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84435866/article/details/138849176

版权

165 篇文章 0 订阅

订阅专栏

算法方面还是很薄弱，好在面试官都很和蔼可亲，擅长发现人的美哈哈哈…（最好多刷一刷，不然影响你的工资和成功率???）
在投递简历之前，最好通过各种渠道找到公司内部的人，先提前了解业务，也可以帮助后期优秀 offer 的决策。
要勇于说不，对于某些 offer 待遇不满意、业务不喜欢，应该相信自己，不要因为当下没有更好的 offer 而投降，一份工作短则一年长则 N 年，为了幸福生活要慎重选择！！！

第一次跳槽十分忐忑不安，和没毕业的时候开始找工作是一样的感受，真的要相信自己，有条不紊的进行。如果有我能帮忙的地方欢迎随时找我，比如简历修改、内推、最起码，可以把烦心事说一说，人嘛都会有苦恼的～

祝大家都有美好的未来，拿下满意的 offer。

当 v-for 和 v-if 处于同一个节点时，v-for 的优先级比 v-if 更高，这意味着 v-if 将分别重复运行于每个 v-for 循环中。如果要遍历的数组很大，而真正要展示的数据很少时，这将造成很大的性能浪费
这种场景建议使用 computed，先对数据进行过滤

在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后立即使用 nextTick 来获取更新后的 DOM。
nextTick主要使用了宏任务和微任务。
根据执行环境分别尝试采用Promise、MutationObserver、setImmediate，如果以上都不行则采用setTimeout定义了一个异步方法，多次调用nextTick会将方法存入队列中，通过这个异步方法清空当前队列。

Vue 不能检测以下数组的变动：
- 第一类问题
  // 法一：Vue.set Vue.set(vm.items, indexOfItem, newValue)
  // 法二：Array.prototype.splice vm.items.splice(indexOfItem, 1, newValue)
- 第二类问题，可使用 splice：vm.items.splice(newLength)
- 当你利用索引直接设置一个数组项时，例如vm.items[indexOfItem] = newValue
- 当你修改数组的长度时，例如：vm.items.length = newLength
  解决办法：
vm. $set 的实现原理是：
- 如果目标是数组，直接使用数组的 splice 方法触发相应式；
- 如果目标是对象，会先判读属性是否存在、对象是否是响应式，最终如果要对属性进行响应式处理，则是通过调用defineReactive 方法进行响应式处理（ defineReactive 方法就是 Vue 在初始化对象时，给对象属性采用 Object.defineProperty 动态添加 getter 和 setter 的功能所调用的方法）

简单回答
- beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、
  destroyed。
- keep-alive 有自己独立的钩子函数 activated 和 deactivated。
复杂回答
生命周期

可以在钩子函数 created、beforeMount、mounted 中进行调用，因为在这三个钩子函数中，data 已经创建，可以将服务端端返回的数据进行赋值。
但是推荐在 created 钩子函数中调用异步请求，因为在 created 钩子函数中调用异步请求有以下优点：
- 能更快获取到服务端数据，减少页面loading 时间；
- ssr不支持 beforeMount 、mounted 钩子函数，所以放在 created 中有助于一致性；

hash 模式：
- #后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面
- 通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。
history 模式：
- history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和replaceState，这两个 API可以在改变url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作
区别
- url 展示上，hash 模式有“#”，history 模式没有
- 刷新页面时，hash 模式可以正常加载到 hash 值对应的页面，而 history 没有处理的话，会返回 404，一般需要后端将所有页面都配置重定向到首页路由
- 兼容性，hash 可以支持低版本浏览器和 IE。

keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，避免重新渲染，其有以下特性：
- 一般结合路由和动态组件一起使用，用于缓存组件；
- 提供 include 和 exclude 属性，两者都支持字符串或正则表达式， include 表示只有名称匹配的组件会被缓存，exclude 表示任何名称匹配的组件都不会被缓存，其中 exclude 的优先级比 include 高；
- 对应两个钩子函数 activated 和 deactivated ，当组件被激活时，触发钩子函数 activated，当组件被移除时，触发钩子函数 deactivated。

读者福利

========

由于篇幅过长，就不展示所有面试题了，想要完整面试题目的朋友（另有小编自己整理的2024大厂高频面试题及答案附赠）

关注