【面经系列】Vue面经，熬夜肝完这份Framework笔记

【总结】：MVVM 模式简化了界面与业务的依赖，解决了数据频繁更新。在 MVVM 中，利用双向绑定技术，使得 Model 变化时，ViewModel 会自动更新，而 ViewModel 变化时，View 也会自动更新。

【Q2】谈谈你对SPA的理解

---

SPA 应用仅在页面首次初始化时加载相应的 HTML，CSS，JS 。一旦完成加载，就不会因为用户的操作而进行页面的重新加载，取而代之的是利用前端路由实现内容的变换。

【优点】：

• 前后端职责更好的分离，架构清晰

• 用户体验好，服务器相对压力小

【缺点】：

• 首次加载耗时久

• SEO 难优化

【Q3】谈谈你对响应式的理解

---

通过数据模型（普通的 JS 对象）来驱动视图的更新，就是响应式。

以实例的 data 选项为例，当我们把一个普通的 JS 对象传入 Vue 实例作为 data 时，Vue 将遍历这个对象的所有属性，然后通过 Object.defineProperty （vue 2.x）或者 Proxy （vue 3.x）定义属性的 getter和 setter ，从而让 Vue 能够追踪当这些属性访问与修改。具体是怎么追踪的呢？每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把接触过的数据记录为依赖，这个过程也称为依赖收集，然后当依赖的 setter 触发时，就会通知 watcher ，从而使他们关联的组件重新渲染。

【Q4】你知道 Vue 双向数据绑定的原理吗？

---

Vue 双向数据绑定是指：数据变化更新视图，视图变化更新数据，例如输入框输入内容变化时，data 中对应的数据同步变化，data 中绑定的数据变化时，输入框的内容同步变化。

Vue 主要通过4个部分来实现双向数据绑定：

• 监听器 Observer ：对数据对象进行遍历，利用 Object.defineProperty() 在属性上都加上 getter 和 setter ，从而监听数据的变化。

• 解析器 Compile ：解析模板指令，将模板中的变量都替换成数据，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变化就会调用更新函数进行更新。

• 订阅者 Watcher ：订阅者是监听器和解析器之间通信的桥梁，主要任务是订阅监听器中的属性值变化的消息，当收到属性值变化的消息时，触发解析器中对应的更新函数。

• 订阅器 Dep ：订阅器采用发布-订阅设计模式，用来收集订阅者 Watcher 对监听器 Observer 和 订阅者 Watcher 进行统一管理。

【Q5】为什么 Vue 要采用异步渲染？异步渲染是如何实现的？

---

如果不采用异步渲染，那么每次更新数据都会进行重新渲染，这会对性能大打折扣，异步渲染是提高性能的手段之一。

只要监听到数据变化，Vue 将开启一个队列，并缓冲在同一个事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。然后，在下一个事件循环中，Vue 刷新队列并执行实际工作。Vue 内部对异步队列常使用原生的 Promise.then、MutationObserver 和 setImmediate。如果环境不支持，则采用 setTimeout(fun,0)。

【Q6】Vue 是如何检测数组的变化

---

在 Vue 官方中，提供了7个操作数组的方法：

• push()

• pop()

• shift()

• unshift()

• splice()

• sort()

• reverse()

用于 “响应式” 的操作数组，也就是说，通过以上7个方法改变数组的元素，这会导致 data 中的数据变化，从而导致视图发生变化。除此以外，还可以通过 “新数组” 替换 “旧数组” 的方式来触发视图层的改变。但是，千万不能通过索引直接改变一个数组，这样不会引起视图层的改变，只是单纯的改变了数据。还有，不能通过修改数组长度来删除元素。

Vue 将 data 中的数组进行了原型链重写，指向了自己所定义的数组原型方法（也就是说上面的7个方法是Vue重写过的），从而实现了通过这些方法改变数组就可以通知视图层更新的效果。

【Q7】谈谈你对 Vue 生命周期的理解

---

Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、卸载等一些列过程，就是生命周期。

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

深知大多数初中级前端工程师，想要提升技能，往往是自己摸索成长或者是报班学习，但自己不成体系的自学效果低效又漫长，而且极易碰到天花板技术停滞不前！
因此收集整理了一份《2024年Web前端开发全套学习资料》送给大家，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）

)]

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

如果你觉得这些内容对你有帮助，可以添加下面V无偿领取！（备注：前端）
[外链图片转存中…(img-4yMAuRqN-1710904233444)]