2024年最全Vue3进阶（壹）：初探 Vue3，互联网大厂面试

对象篇

模块化编程-自研模块加载器

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

4.1 更快更省

Object.defineProperty >  Proxy

• 不需要遍历并修改原始对象;
• 可以完全覆盖对象/数组操作;
• 可以覆盖更多的数据类型;
• 观察更加精准，消耗更少;
• 原生 API，速度超快;
• 内存减半，速度加倍;
• 重构 Virtual DOM;
• 生成的代码更容易被 JS 引擎理解、优化;
• 动静结合，精确编译和重新渲染动态的部分;
• 优化 <slot> 生成（默认编译为函数）;
• 支持 tree-shaking，有效减小打包体积;
• 速度加快6倍;
• 可以告别 Time slicing;
• 支持更大规模的应用;
• 编译后的代码尽可能简洁;

4.2 完全 TypeScript 重构

• 让 Vue 开发团队更轻松;
• 架构更松散灵活，阅读源码更轻松;
• 可以独立使用 Vue 内部模块;
• IDE 支持更好;

4.3 Composition API

概要：将 2.x 中与组件逻辑相关的选项以 API 函数的形式重新设计。
曾用名：Vue Function-based API
取代了早先的 Class API

五、Vue 2 对象式组件的问题

• 难以复用逻辑代码；
• 难以拆分超大型组件；
• 代码无法被优化/压缩；
• 难以进行数据类型推导；

六、Composition API 如何解决这些问题

• 纯函数，方便 JS 运行时理解；
• 轻松完成 tree-shaking；
• 单一组件的代码可以统合在一起；
• 不同组件间，可以对象解构及重命名避免命名空间冲突；

七、升级策略

提供兼容版本和标准版本；

• 兼容版本中，setup() 优先使用；
• 一些属性可以继续保留，比如 template；
• 数据、方法、生命周期都将被废弃；
• 开发者可以渐进式的将代码升级到新版；

八、使用 Composition API

九、为什么 Vue 3.0 要这么做

• UI 语言，需要很强的表达力；
• UI 组件，最常见的需求是“组合”；
• 能够把优化交给 JavaScript 运行时；
• 能够兼容老版本；

“制定税收法律时，可以使用线性税率，也可以使用递进式税率。评价哪种税收制度更公正，要看收入水平不同的人，谁缴的税更多。设计 API 也类似，要看哪些开发人员需要面对更复杂的问题。

作为 API 设计人员，我们的目标和税收系统的谋划者不同：我们希望尽可能少征税，而不是多征税。

所以，如果 90% 的用户能够留在低税率阶段，只有 10% 的用户需要多缴税，在我看来，比大家平摊税负要好得多。

正因为如此，

Vue 的 API 是“分层”的：模版和对象式 API 可以满足大部分使用场景，工作得很好，只需要用户投入很少的学习时间。Composition API和渲染函数需要“缴纳更多的税赋”，但是只有少数开发者需要负担，而他们也将从系统中获取更多收益。”

9.1 其它改进

• 组件里可以有多个根节点（<fragment>）；
• v-model 支持多属性；
• 支持 <portal> 将子树在其它地方渲染；
• 可以自定义渲染函数，方便扩展到其它平台；
• 增加了全局 API 的命名空间；
• 将 props 变为可选；
• 自定义指令增加 beforeUnmount；

9.2 一些变化

• 渲染函数变化；
• 异步组件需要用 createAsyncComponent；
• 统一普通插槽与作用域插槽；
• 指令中支持动态参数；

9.3 一些移除

• inline-template；
• filters；
• 事件绑定中的 keyCode；
• 不再支持函数式组件，请转用纯渲染函数
• 移除 v-bind 中的 .sync 修饰符

十、应对之道

• 阅读理解 RFC：https://github.com/vuejs/rfcs
• 阅读源码：https://github.com/vuejs/vue-next
• 学习 TypeScript；
• 使用单元测试/E2E测试武装自己；

框架相关

原生JS虽能实现绝大部分功能，但要么就是过于繁琐，要么就是存在缺陷，故绝大多数开发者都会首选框架开发方案。现阶段较热门是React、Vue两大框架，两者工作原理上存在共通点，也存在一些不同点，对于校招来说，不需要两个框架都学得特别熟，一般面试官会针对你简历中写的框架进行提问。

在框架方面，生命周期、钩子函数、虚拟DOM这些基本知识是必须要掌握的，在学习的过程可以结合框架的官方文档

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

Vue框架

知识要点：
1. vue-cli工程
2. vue核心知识点
3. vue-router
4. vuex
5. http请求
6. UI样式
7. 常用功能
8. MVVM设计模式

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

5. http请求*

6. UI样式
7. 常用功能
8. MVVM设计模式

[外链图片转存中…(img-dZISxK69-1715657496686)]

React框架

知识要点：
1. 基本知识
2. React 组件
3. React Redux
4. React 路由

[外链图片转存中…(img-BdQOXmMc-1715657496687)]