化身面试官出30+Vue面试题，超级干货（附答案）(2)，资深web前端开发

• created：实例创建完之后调用。实例完成：数据观测、属性和方法的运算、 watch/event 事件回调。无 $el .

• beforeMount：在挂载之前调用，相关 render 函数首次被调用

• mounted：了被新创建的vm.$el替换，并挂载到实例上去之后调用改钩子。

• beforeUpdate：数据更新前调用，发生在虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。

• updated：由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用改钩子。

• beforeDestroy：实例销毁前调用，实例仍然可用。

• destroyed：实例销毁之后调用，调用后，Vue实例指示的所有东西都会解绑，所有事件监听器和所有子实例都会被移除

每个生命周期内部可以做什么？

• created：实例已经创建完成，因为他是最早触发的，所以可以进行一些数据、资源的请求。

• mounted：实例已经挂载完成，可以进行一些DOM操作。

• beforeUpdate：可以在这个钩子中进一步的更改状态，不会触发重渲染。

• updated：可以执行依赖于DOM的操作，但是要避免更改状态，可能会导致更新无线循环。

• destroyed：可以执行一些优化操作，清空计时器，解除绑定事件。

ajax放在哪个生命周期？：一般放在 mounted 中，保证逻辑统一性，因为生命周期是同步执行的， ajax 是异步执行的。单数服务端渲染 ssr 同一放在 created 中，因为服务端渲染不支持 mounted 方法。 什么时候使用beforeDestroy？：当前页面使用 $on ，需要解绑事件。清楚定时器。解除事件绑定， scroll mousemove 。

父子组件生命周期调用顺序（简单）

================

答案

渲染顺序：先父后子，完成顺序：先子后父

更新顺序：父更新导致子更新，子更新完成后父

销毁顺序：先父后子，完成顺序：先子后父

Vue组件通信 ❗

=========

答案

• 父子间通信:父亲提供数据通过属性 props传给儿子；儿子通过 $on 绑父亲的事件，再通过 $emit 触发自己的事件（发布订阅）

• 利用父子关系 $parent 、 $children ，

获取父子组件实例的方法。

• 父组件提供数据，子组件注入。 provide 、 inject ，插件用得多。

• ref 获取组件实例，调用组件的属性、方法

• 跨组件通信 Event Bus （Vue.prototype.bus=newVue）其实基于bus = new Vue）其实基于bus=newVue）其实基于on与$emit

• vuex 状态管理实现通信

Vuex 工作原理

=========

答案

官网：vuex.vuejs.org/zh/

• Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。

• 状态自管理应用包含以下几个部分： state，驱动应用的数据源； view，以声明方式将 state 映射到视图； actions，响应在 view 上的用户输入导致的状态变化。下图单向数据流示意图：

• vuex，多组件共享状态，因-单向数据流简洁性很容易被破坏： 多个视图依赖于同一状态。 来自不同视图的行为需要变更同一状态。

问虚拟 DOM 吧，看你能不能讲清楚从真实 DOM 到虚拟 DOM ，再和我说说 diff

如何从真实DOM到虚拟DOM

==============

答案

涉及到Vue中的模板编译原理，主要过程：

1. 将模板转换成 ast 树， ast 用对象来描述真实的JS语法（将真实DOM转换成虚拟DOM）

2. 优化树

3. 将 ast 树生成代码

用VNode来描述一个DOM结构

================

答案

虚拟节点就是用一个对象来描述一个真实的DOM元素。首先将 template （真实DOM）先转成 ast ， ast 树通过 codegen 生成 render 函数， render 函数里的 _c 方法将它转为虚拟dom

diff算法

======

答案

时间复杂度： 个树的完全 diff 算法是一个时间复杂度为 O(n*3） ，vue进行优化转化成 O(n) 。

理解：

• 最小量更新， key 很重要。这个可以是这个节点的唯一标识，告诉 diff 算法，在更改前后它们是同一个DOM节点 扩展 v-for 为什么要有 key ，没有 key 会暴力复用，举例子的话随便说一个比如移动节点或者增加节点（修改DOM），加 key 只会移动减少操作DOM。

• 只有是同一个虚拟节点才会进行精细化比较，否则就是暴力删除旧的，插入新的。

• 只进行同层比较，不会进行跨层比较。

diff算法的优化策略：四种命中查找，四个指针

1. 旧前与新前（先比开头，后插入和删除节点的这种情况）

2. 旧后与新后（比结尾，前插入或删除的情况）

3. 旧前与新后（头与尾比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧后之后）

4. 旧后与新前（尾与头比，此种发生了，涉及移动节点，那么新前指向的节点，移动到旧前之前）

— 问完上面这些如果都能很清楚的话，基本O了 —

以下的这些简单的概念，你肯定也是没有问题的啦

Computed watch 和 method

=======================

答案

computed：默认computed也是一个watcher具备缓存，只有当依赖的数据变化时才会计算, 当数据没有变化时, 它会读取缓存数据。如果一个数据依赖于其他数据，使用 computed

watch：每次都需要执行函数。 watch 更适用于数据变化时的异步操作。如果需要在某个数据变化时做一些事情，使用watch。

method：只要把方法用到模板上了,每次一变化就会重新渲染视图，性能开销大

v-if 和 v-show 区别

================

答案

• v-if 如果条件不成立不会渲染当前指令所在节点的DOM元素

• v-show 只是切换当前DOM的显示与隐藏

v-for和v-if为什么不能连用

=================

答案

v-for 会比 v-if 的优先级更高，连用的话会把 v-if 的每个元素都添加一下，造成性能问题。

v-html 会导致哪些问题（简单）

==================

答案

• XSS 攻击

• v-html 会替换标签内部的元素

描述组件渲染和更新过程

===========

答案

渲染组件时，会通过 vue.extend() 方法构建子组件的构造函数，并进行实例化。最终手动调用 $mount() 进行挂载。更新组件时会进行 patchVnode 流程，核心就是 diff 算法。

组件中的data为什么是函数

==============

答案

避免组件中的数据互相影响。同一个组件被复用多次会创建多个实例，如果 data 是一个对象的话，这些实例用的是同一个构造函数。为了保证组件的数据独立，要求每个组件都必须通过 data 函数返回一个对象作为组件的状态。

为什么要使用异步组件？

===========

答案

1. 节省打包出的结果，异步组件分开打包，采用jsonp的方式进行加载，有效解决文件过大的问题。

2. 核心就是包组件定义变成一个函数，依赖 import（） 语法，可以实现文件的分割加载。

详细地看官方文档：cn.vuejs.org/v2/guide/co…

action 与 mutation 的区别

=====================

答案

• mutation 是同步更新， $watch 严格模式下会报错

• action 是同步操作，可以获取数据后调用 mutation 提交最终数据

插槽与作用域插槽的区别

===========

插槽

==

答案

• 创建组件虚拟节点时，会将组件儿子的虚拟节点保存起来。当初始化组件时，通过插槽属性将儿子进行分类 {a:[vnode],b[vnode]}

• 渲染组件时会拿对应的 slot 属性的节点进行替换操作。（插槽的作用域为父组件）

作用域插槽

=====

答案

• 作用域插槽在解析的时候不会作为组件的孩子节点。会解析成函数，当子组件渲染时，会调用此函数进行渲染。

• 普通插槽渲染的作用域是父组件，作用域插槽的渲染作用域是当前子组件。

vue中相同逻辑如何抽离

============

答案

其实就是考察 vue.mixin 用法，给组件每个生命周期，函数都混入一些公共逻辑。

谈谈对keep-alive的了解

================

答案

keep-alive 可以实现组件的缓存，当组件切换时不会对当前组件进行卸载。常用的2个属性 include/exclude ，2个生命周期 activated ， deactivated

Vue性能优化

=======

答案

编码优化：

• 事件代理

• keep-alive

• 拆分组件

• key 保证唯一性

• 路由懒加载、异步组件

• 防抖节流

Vue加载性能优化

• 第三方模块按需导入（ babel-plugin-component ）

• 图片懒加载

用户体验

• app-skeleton 骨架屏

• shellap p壳

• pwa

SEO优化

• 预渲染

再说一句

====

觉得不错的朋友可以⭐️关注我，后续会持续更新~

⭐️⭐️ 最后祝各位正在准备秋招补招和春招的小伙伴面试顺利~，收割offer，我们一起加油吧！还有就是 新年快乐❤️ ❤️ ~

最后
自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但对于培训机构动则几千的学费，着实压力不小。自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上前端开发知识点，真正体系化！

[外链图片转存中…(img-5LPwYRcY-1712318845008)]

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

如果你觉得这些内容对你有帮助，可以扫码获取！！（备注：前端）

最后

前端CSS面试题文档，JavaScript面试题文档，Vue面试题文档，大厂面试题文档，需要的读者可以戳这里免费领取！

[外链图片转存中…(img-pM4hwgSK-1712318845008)]

[外链图片转存中…(img-jDTikfYz-1712318845008)]