第一章 为什么选择 Vue.JS
前端框架对比
前端框架的发展
静态页面 → 出现了 JavaScript → 后端 MVC 模式 → Ajax 的出现 → jQuery 解决了不同浏览器的兼容问题 → Angular、React、Vue 出现引领了前端 MVVM 模式的潮流
三大框架比较
在前端 MVVM 模式下，不同框架的目标都是一致的，就是利用数据驱动页面，但是怎么处理数据的变化，各个框架走出了不同的路线。
Angular
Angular 1 就是最老套的脏检查。后面 Angular 团队自断双臂，完全抛弃 Angular 1，搞了一个全新的框架还叫 Angular，引入了 TypeScript、RxJS 等新内容，虽然这些设计很优秀，但是不支持向前兼容，抛弃了老用户。
Vue.js
而 Vue 1 的解决方案，就是使用响应式，初始化的时候，Watcher 监听了数据的每个属性，这样数据发生变化的时候，我们就能精确地知道数据的哪个 key 变了，去针对性修改对应的 DOM 即可。
缺点：对于 Vue 来说，它的一个核心就是「响应式」，也就是数据变化后，会主动通知我们。响应式数据新建 Watcher 监听，本身就比较损耗性能，项目大了之后每个数据都有一个 watcher 会影响性能。
解决：对于 Vue 2 来说，组件之间的变化，可以通过响应式来通知更新。组件内部的数据变化，则通过虚拟 DOM 去更新页面。这样就把响应式的监听器，控制在了组件级别，而虚拟 DOM 的量级，也控制在了组件的大小。Vue 3 很优秀的一个点，就是在虚拟 DOM 的静态标记上做到了极致，让静态的部分越过虚拟 DOM 的计算，真正做到了按需更新，很好的提高了性能。
React
在页面初始化的时候，在浏览器 DOM 之上，搞了一个叫虚拟 DOM 的东西，也就是用一个 JavaScript 对象来描述整个 DOM 树。我们可以很方便的通过虚拟 DOM 计算出变化的数据，去进行精确的修改。
缺点：对于 React 的虚拟 DOM 的 Diff 计算逻辑来说，如果虚拟 DOM 树过于庞大，使得计算时间大于 16.6ms，那么就可能会造成性能的卡顿。
解决：React 为了突破性能瓶颈，借鉴了操作系统时间分片的概念，引入了 Fiber 架构。通俗来说，就是把整个虚拟 DOM 树微观化，变成链表，然后我们利用浏览器的空闲时间计算 Diff。高性能的动画要求是 60fps，也就是 1 秒要渲染 60 次，每一帧的时间就是 16.6 毫秒，在这 16.6 毫秒里，浏览器自己的渲染更新任务执行后，会有一部分的空闲时间，这段时间我们就用来计算 Diff。
清单应用
Vue 3 新特性
- RFC 机制。Vue 团队开发的工作方式。
- 响应式系统。从 defineProperty 升级到 Proxy。
- 自定义渲染器。Vue 3 的组织架构中，响应式独立了出来。渲染的逻辑也拆成了平台无关渲染逻辑和浏览器渲染 API 两部分。
- 全部模块使用 TypeScript 重构。
- Composition API 组合语法。
- 新的组件。Vue 3 还内置了 Fragment、Teleport 和 Suspense 三个新组件。
- 新一代工程化工具 Vite。
选择 Vue2 还是 Vue3
Vue.js 2.0 已于 2023 年 12 月 31 日达到终止支持（EOL）时间，官方不再进行维护。
这意味着 Vue 2.0 不再会有新增功能、更新或问题修复。