后端工程师现代前端快速手册
内容提要
本文介绍了React和Vue的历史背景、基础原理、项目重要文件和常用知识。React强调组件化开发，使用虚拟DOM提高开发效率；Vue简单易用，使用AST抽象语法树和虚拟DOM提高性能。项目结构类似，使用打包工具如Webpack、Rollup、Parcel。JavaScript发展至ES6/ES2015，TypeScript提供静态类型检查。npm、npx和yarn是常用的包管理工具。Vue3的常用知识包括模板语法、Composition API、新的响应式API和生命周期钩子。自定义模板可以提高可读性。
延伸解读
从后端视角看前端工程化：模块与打包的必然性
文章指出，早期浏览器不支持JS模块，大型项目只能合并成单一脚本。Node.js的CommonJS规范服务于服务器端，而浏览器端需要ES6模块规范，这直接催生了Webpack、Rollup、Parcel等打包工具。对于后端开发者，理解这一点很关键：现代前端项目中的打包配置并非多余，而是为了解决模块化在浏览器环境中的落地问题。Vite使用Rollup作为打包工具，React则依赖Babel转换JSX，这些工具链的选择与后端构建工具的思路有相似之处。
虚拟DOM与AST：两种框架的性能优化路径
文章对比了React和Vue在原理上的差异：React将JSX直接转换为虚拟DOM，再通过diff算法比较差异并更新真实DOM；Vue3则先用AST将模板编译成JS代码，再生成虚拟DOM，这样模板编译工作可以提前完成，从而提高运行时性能。对于后端开发者，可以将其类比为解释执行与预编译的区别。理解这一点有助于在技术选型时判断：如果项目对运行时性能敏感，Vue3的预编译策略可能更有优势；而React的灵活性则体现在JSX的表达能力上。
Vue3的Composition API与响应式API：逻辑组织方式的转变
文章介绍了Vue3引入的Composition API，使用setup函数组织组件逻辑，取代了原有的data、methods等选项。同时，新的响应式API包括ref、reactive、toRefs，提供了更细粒度的控制。对于后端开发者，这种变化类似于从按层组织代码转向按功能组织代码。ref用于包装基本类型，访问需通过.value；reactive用于包装对象，属性自动响应。理解这些差异有助于避免在迁移或新项目中出现响应式数据使用不当的问题。
Q&A
React和Vue在核心原理上有什么主要区别？
React强调组件化开发，使用虚拟DOM提高开发效率，并通过diff算法比较新旧虚拟DOM的差异来减少DOM操作。Vue同样使用虚拟DOM，但Vue3核心使用了AST抽象语法树，将模板转换成JS代码，再生成虚拟DOM，这样模板编译可以提前完成，提高运行时性能。此外，React有四大组件，将VDOM区分成4种，而Vue的数量稍有不同。
Vue3项目的基本结构是怎样的？入口文件是哪个？
Vue3项目结构类似Node项目，以Vue3为例：public目录下的index.html是整个项目的入口文件，src目录下的main.js是入口JS文件，App.vue是根组件。assets目录存放样式相关文件，components目录存放功能组件。根目录下的babel.config.js、package-lock.json、package.json、vite.config.js等文件用于项目打包。注意根目录下的json文件可以重新定义默认文件位置，比如把index.html放到root下。
TypeScript相比JavaScript有哪些优势？
TypeScript是JavaScript的超集，任何合法的JavaScript代码都是合法的TypeScript代码。它提供了静态类型检查，可以在开发阶段捕获潜在错误，提高代码可维护性；支持类、接口、模块等面向对象编程，增强代码结构和可读性；集成了丰富的工具支持，包括智能代码补全、跳转到定义、重构等，提高开发效率。TypeScript在社区中得到了广泛认可和支持。
npm、npx和yarn有什么区别？
npm是Node.js最常用的包管理工具，用于安装、卸载、更新和管理依赖包，创建于2010年1月。npx是Node包执行工具，可用于运行临时的或者在项目中未安装的包，创建于2017年7月。Yarn是快速、可靠、安全的Node.js依赖管理工具，与npm类似但有一些额外的特性，创建于2016年10月。三者区别不大，都是常用的包管理工具。
Vue3的Composition API是什么？它有什么作用？
Vue3引入了Composition API，提供了一种更灵活和可组合的方式来组织组件逻辑。使用setup函数，可以将组件的数据、方法等进行逻辑组织，取代了以前的data、methods等选项。这使得代码组织更加灵活，便于逻辑复用和组合。
Vue3中ref和reactive有什么区别？
ref用于创建一个包装过的响应式对象，将一个普通的JavaScript值转换为响应式数据，返回一个带有.value属性的对象，访问和修改值时都需要使用.value。reactive用于创建一个包装过的响应式对象，将一个普通的JavaScript对象转换为响应式数据，可以包装整个对象，并且对象的所有属性都会变成响应式的。两者都是Vue3新的响应式API，提供更细粒度的响应式控制。
Vue3中常用的生命周期钩子有哪些？
Vue3常用的生命周期钩子包括：beforeCreate（实例创建之前）、created（实例创建后）、beforeMount（挂载开始之前）、mounted（挂载完成后）、beforeUpdate（数据更新之前）、updated（虚拟DOM重新渲染和打补丁后）、beforeUnmount（卸载之前）、unmounted（卸载完成后）、errorCaptured（子孙组件抛出错误后调用）、onRenderTriggered（渲染触发Suspense时调用）、onRenderTracked（渲染跟踪Suspense时调用）。Vue3还引入了新的生命周期钩子如beforeUnmount，以提供更精细的控制。
