2024年前端最新新一代前端应该使用的“开发套餐“，字节跳动历年校招Web前端面试真题解析

总结

根据路线图上的重点去进行有针对性的学习，在学习过程中，学会写笔记，做总结。

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

这里分享一些前端学习笔记：

• html5 / css3 学习笔记

  

• JavaScript 学习笔记

  

• Vue 学习笔记

  

特点

• 更好的 ts 支持
• 更方便的语法糖
• setup 组合API，提高封装逻辑代码，提高复用
• 体积更小，按需编译体积比 vue2.x 要更小
• 通过Proxy实现的更灵活 响应式系统！
• 更快的diff算法
  Vue3 重大变化详情

祖师爷的新作，往死学就完事了！

Preact

传送门

特点

• 最快的虚拟 DOM 库之一
• 体积很小只有3kb
• 可以无缝衔接React生态系统中组件

lit

传送门

特点

• 用于构建快速、轻量级的 Web 组件
• Lit 组件可以跨多个应用程序和站点使用
• 使用声明式模板
• HTML 标签增强拓展，可以像使用内置 HTML 元素一样使用组件
• 支持响应式
• 支持ts
• 大小约为 5 KB

svelte

传送门

特点

• 没有虚拟DOM
• 在构建时将您的应用程序转换为理想的 JavaScript，而不是在运行时解释您的应用程序代码
• 支持响应式
• 支持声明式模板开发
• 提高首页面加载速度

Vite

传送门

特点

• 使用原生 ESM 文件，无需打包!
• 使用esbuild构建依赖
• 对 TypeScript、JSX、CSS 等支持开箱即用
• 通过浏览器请求源码时进行转换并按需提供源码，实现冷启动

Vites

传送门

特点

• 与Vite通用的配置、转换器、解析器和插件。
• 使用你的应用程序中的相同配置来进行测试！
• 智能文件监听模式，就像是测试的 HMR！
• 支持测试 Vue、React、Lit 等框架中的组件。
• 开箱即用的 TypeScript / JSX 支持
• ESM 优先，支持模块顶级 await
• 通过 tinypool 使用 Worker 线程尽可能多地并发运行
• 套件和测试的过滤、超时、并发配置
• Jest 的快照功能
• 内置 Chai 进行断言 + 与 Jest expect 语法兼容的 API
• 内置用于对象模拟(Mock)的 Tinyspy
• 使用 jsdom 或 happy-dom 用于 DOM 模拟
• 通过 c8 来输出代码测试覆盖率
• 类似于 Rust 语言的 源码内联测试

VitePress

传送门

特点

• 使用真正的 SSG + SPA 架构
• 基于Vite 构建
• 利用 Vue 3 改进的模板静态分析对静态内容进行字符串化，降低js负载成本
• VitePress 旨在缩减当前 VuePress 的复杂性

Pinia

传送门

特点

• 大小约 1kb
• dev-tools 支持
  • 跟踪动作、突变的时间线
  • Store 出现在使用它们的组件中
  • time travel 和 更容易的调试
• 热模块更换
  • 在不重新加载页面的情况下修改您的 Store
  • 在开发时保持任何现有状态
• 插件：使用插件扩展 Pinia 功能
• 为 JS 用户提供适当的 TypeScript 支持或 autocompletion
• 服务器端渲染支持
• Vue2、Vue3 都可使用

PNPM

Vue

• 什么是MVVM？

• mvvm和mvc区别？它和其它框架（jquery）的区别是什么？哪些场景适合？

• 组件之间的传值？

• Vue 双向绑定原理

• 描述下 vue 从初始化页面–修改数据–刷新页面 UI 的过程？

• 虚拟 DOM 实现原理

• Vue 中 key 值的作用？

• Vue 的生命周期

• Vue 组件间通信有哪些方式?

• vue 中怎么重置 data?

• 组件中写 name 选项有什么作用？

• Vue 的 nextTick 的原理是什么？

• Vuex 有哪几种属性?

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