切图仔的自我修养：现代前端工具链
前言随着前端技术的不断发展，越来越多的工具和框架涌现出来，帮助开发者构建更高效、可维护的应用程序，本文将从下述几个方面来进行简要记录（生命不息，学习不止）语言框架包管理器构建工具 🆚状态管理库 🆚CSS 预处理器 🆚测试工具代码转译与辅助工具语言常用的两款前端语言TypeScript和JavaScript，针对它们的介绍，在早期的文章已有介绍，烦请移步传送门[post cid="212" /]框架名称说明Vue.js渐进式 JavaScript 框架，适用于构建交互式 Web 界面。React由 Facebook 开发的 UI 库，采用组件化架构。Svelte编译时框架，构建高性能 Web 应用，零运行时开销。Angular谷歌出品的大型企业级框架，采用 TypeScript 编写。Nuxt.js基于 Vue 的 SSR 框架。Astro新型静态网站生成器，支持多种前端框架并优化性能。SolidJS响应式 UI 框架，运行时性能极高，类似 React 的语法。Qwik以懒加载为核心特性的框架，实现超快首屏加载。Lit谷歌开发的 Web Components 框架。MarkoeBay 开发的 UI 框架，支持流式 SSR。包管理器针对包管理器，在早期的文章已有介绍，烦请移步传送门[post cid="26" /]构建工具 🆚特性Vue CLIVite构建机制基于 Webpack 的打包工具基于原生 ES 模块（ESM）的新型构建工具开发启动速度较慢（需要打包整个项目）极快（无需打包，按需编译）HMR 热更新速度快（但不如 Vite）极速，几乎无延迟配置复杂度默认封装较多，配置较复杂更加轻量，配置更简单适合项目类型中大型项目、传统打包构建需求小型到中型项目，现代前端开发首选插件系统使用 Webpack 插件生态自己的插件系统（基于 Rollup，vite7 使用 Rolldown）生产构建使用 Webpack 打包输出使用 Rolldown 、Rollup 或 esbuild 等进行高效打包对 TypeScript / JSX / CSS 预处理器的支持需要额外配置开箱即支持是否仅限 Vue？是（主要针对 Vue 2/3）否（支持 Vue、React、Svelte 等）状态管理库 🆚特性VuexPiniaAPI 设计概念多（state、getter、mutation、action）更加简洁直观TypeScript 支持一般，需额外定义类型原生支持，类型推导强模块化支持，但配置较繁琐支持，模块自动注册状态修改方式只能通过 mutation 提交可直接修改 state性能表现成熟稳定更轻量、响应更快Vue Composition API 兼容性一般完美兼容CSS 预处理器 🆚特性VuexPinia编译器语言Ruby（旧版）、Dart（新版）JavaScript（Node.js）变量符号$variable@variable控制结构（if/for）支持支持嵌套规则支持支持混合宏（Mixins）支持支持社区活跃度高中等开发者体验更强大、更灵活更简单、更轻量测试工具名称说明Vitest与 Vite 配套的测试框架，支持 TypeScript。JestFacebook 推出的测试框架，适合 React 项目。Playwright微软开发的浏览器自动化测试工具。CypressE2E 测试工具，支持可视化调试。Testing LibraryReact/Vue/DOM 测试库，鼓励用户行为驱动测试。代码转译与辅助工具名称说明Babel将 ES6+ 语法编译为兼容旧浏览器的代码。TypeScriptJavaScript 的超集，支持类型系统。SWCRust 编写的 JS 编译器，比 Babel 更快。Sucrase快速 JS 编译器，适合开发时使用。结语语言、框架、工具不在乎好坏，能用、好用、适合用才是正解，现如今前端技术发展迅速，新玩具层出不穷。根据需求和场景（特别是新项目搭建时）选择适合自己项目和团队的技术栈非常重要。
创建方式不同vue2 是一个构造函数，通过new创建一个Vue实例new Vue({}) vue3 是一个对象。通过对象Vue的createApp()方法创建一个vue实例Vue.createApp({}) 挂载容器的方式不同vue2new Vue({ el: '#app' }) new Vue({}).$mount('#app') vue3Vue.createApp({}).mount('#app') 双向数据绑定原理改变vue2 的双向数据绑定是利用ES5 的一个 API Object.definePropert()对数据进行劫持 结合 发布订阅模式的方式来实现的。vue3 中使用了 es6 的 ProxyAPI 对数据代理。相比于vue2.x，使用proxy的优势如下 1.defineProperty只能监听某个属性，不能对全对象监听 2.可以省去for in、闭包等内容来提升效率（直接绑定整个对象即可） 3.可以监听数组，不用再去单独的对数组做特异性操作 vue3.x可以检测到数组内部数据的变化 生命周期钩子 — Lifecyle HooksVue2--------------vue3 beforeCreate -> setup() created -> setup() beforeMount -> onBeforeMount mounted -> onMounted beforeUpdate -> onBeforeUpdate updated -> onUpdated beforeDestroy -> onBeforeUnmount destroyed -> onUnmounted activated -> onActivated deactivated -> onDeactivated API风格的改变Vue2与Vue3 最大的区别 — Vue2使用选项类型API（Options API）对比Vue3合成型API（Composition API）旧的选项型API在代码里分割了不同的属性: data,computed属性，methods，等等。新的合成型API能让我们用方法（function）来分割，相比于旧的API使用属性来分组，这样代码会更加简便和整洁。vue2 Options API（选项式API）存在的问题：使用传统的Options API时，新增或者修改一个需求，就需要分别在data、methods、computed、watch等里面不断地寻找、修改。如果代码量大的时候，修改起来就很痛苦。vue3中 Composition API（组合式API）的优势：更加优雅的组织我们的代码、函数，让相关功能的代码更加有序的组织在一起，都写在setup里面。甚至可以把他们都变成一个个hook函数，修改那部分就可以直接去对应的文件里修改。把定义数据、方法这部分也添加了模块化封装的思想技术栈-拍档对比vue2名称简介文档 Node.jsJavaScript 运行环境https://nodejs.orgJavascriptJavascripthttps://www.javascript.com/npm包管理工具https://www.npmjs.comVue CLI前端开发与构建工具https://cli.vuejs.org/Vue.js渐进式 JavaScript 框架https://staging-cn.vuejs.orgVue RouterVue.js 官方路由管理器https://next.router.vuejs.orgVuex用于 Vue 的状态管理库https://vuex.vuejs.org/Axios简洁、易用且高效的 http 库http://www.axios-js.comLessCSS 预处理、扩展语言（css可选其它）https://lesscss.orgAntDesignVueAntDesign 的 Vue 实现（UI可选其它）https://antdv.comvue3名称简介文档 Node.jsJavaScript 运行环境https://nodejs.orgTypeScriptTypeScripthttps://www.typescriptlang.org/Yarn包管理工具https://yarnpkg.comVite下一代前端开发与构建工具https://cn.vitejs.devES6ECMAScript 6https://es6.ruanyifeng.comVue.js渐进式 JavaScript 框架https://staging-cn.vuejs.orgVue RouterVue.js 官方路由管理器https://next.router.vuejs.orgPinia用于 Vue 的状态管理库https://pinia.esm.devAxios简洁、易用且高效的 http 库http://www.axios-js.comLessCSS 预处理、扩展语言（css可选其它）https://lesscss.orgAntDesignVueAntDesign 的 Vue 实现（UI可选其它）https://antdv.com[scode type="red"]PS:其中还有很多区别对比,在技术日新月异的今天，我们应紧跟潮流，学新不学旧[/scode][post cid="212" /]