奇幻的梦之旅

实现new、Object.create、instanceof、forEach、call、bind、Promise

介绍如何使用 nvm 搭建 Node 环境，在 Mac 电脑下的常用软件和环境变量配置

v-show 和 v-if 区别

• v-show 通过 CSS display 控制显示和隐藏
• v-if 通过判断组件真实渲染和销毁，而不是显示和隐藏
• 频繁切换显示状态用 v-show，否则用 v-if

v-if

• 当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，意味着：v-if 将分别重复运行于每个 v-for 循环中，会造成性能问题。所以，不推荐 v-if 和 v-for 同时使用

Vue 原理

其他扩展：vue面试中常见的面试题

原理的意义

• 知其然知其所以然——各行业通用的道理
• 了解原理，才能应用的更好
• 大厂造轮子（业务定制、技术 KPI）

Vue3

新功能

• createApp

• emits 属性

• 多事件处理

• Fragment

  不再限于模板中的单个根节点

• 移除 .sync 改为 v-model 参数

• 异步组件的引用方式

• 移除 filter

• Teleport

  以前称为 <Portal>，译作传送门（之前都是放在 APP 里，用这个可随意放置）

• Suspense

  可以嵌套层级中等待嵌套的异步依赖项

• Composition API

  • reactive

  • ref、toRef、toRefs

  • readonly

  • computed

  • watch、watchEffect

  • 钩子函数生命周期

从输入 URL 到页面加载显示完成都发生了什么；首屏加载优化；JavaScript 内存管理

拯救移动端图标 – SVG/Flexbox优化布局；优化资源加载的顺序/预渲染页面；Windowing(窗口化)提高列表性能；使用骨架组件减少布局移动(Layout Shift)

必学必会: Gzip& Keep Alive；HTTP资源缓存；Service Worker 实现渐进式应用；HTTP/2加速传输；SSR加速渲染

webpack的优化配置；webpack的依赖优化；基于webpack的代码拆分/资源压缩/资源持久化缓存；React按需加载实现方式

资源的合并与压缩；图片格式的选择: JPG vs PNG vs WebP；图片加载优化: 懒加载、渐进式图片、响应式图片；字体优化