vue3 为什么要引入 Composition API？ Vue 3 引入 Composition API 是 Vue.js 框架演进中的一个重要里程碑，它旨在解决 Vue 2 中基于 Options API 开发复杂应用时遇到的一系列痛点。下面这个表格清晰地展示了两种 API 风格的核心区别：对比维度​​Options API (Vue 2)​​​​Composition API (Vue 3)​​​​代码组织方式​​按​​选项类型​​（data, methods, computed等）组织代码，逻辑分散按​​逻辑功能​​组织代码，相关代码集中​​逻辑复用机制​​依赖 ​​mixins​​，易导致命名冲突和数据来源不清晰使用​​组合式函数​​，显式引入，依赖清晰​​TypeScript 支持​​支持较弱，类型推断复杂​​原生支持良好​​，提供完整的类型推断​​灵活性 & 可读性​​在复杂组件中逻辑碎片化，可读性差逻辑高内聚，更易于理解和维护​​响应式系统​​基于 Object.defineProperty基于 Proxy，功能更强大🔄 解决代码组织难题在 Vue 2 的 Options API 中，一个功能的逻辑（例如“用户管理”）可能会被拆分到 data、methods、computed和 mounted等不同的选项块中。当组件变得复杂时，为了理解一个完整的功能，你需要在多个选项之间反复跳转阅读代码，这降低了代码的可读性和可维护性。 Composition API 通过 setup函数允许你​​按逻辑功能（feature）来组织代码​​。所有属于同一个功能的响应式数据、计算属性、方法和生命周期钩子都可以放在一起，使得代码像一篇条理清晰的散文，更容易编写、阅读和调试。♻️ 提供更优的逻辑复用方案在 Vue 2 中，跨组件复用逻辑主要依靠 ​​mixins​​。但 mixins 有显著的缺点：​​命名冲突​​：多个 mixin 可能声明相同的属性或方法，导致冲突。​​数据来源不清晰​​：使用多个 mixin 时，很难快速判断一个属性或方法具体来自哪个 mixin，降低了代码的可维护性。Composition API 通过​​组合式函数​​ 解决了这些问题。你可以将可复用的逻辑封装在一个独立的函数中（通常以 use开头，如 useFetch），该函数内部可以管理自己的响应式状态和逻辑。在组件中，你像引入普通函数一样引入它，其返回的值和函数是显式的，来源一目了然，彻底避免了 mixins 的弊端。🦾 增强 TypeScript 集成Composition API 是一套基于函数的 API，这使得它能够与 TypeScript 实现​​天然且完美的协作​​。在 setup函数中，变量和函数类型可以被精确地推断和声明，提供了出色的类型安全和开发体验。相比之下，Options API 由于依赖于 this上下文，其类型推断在复杂场景下往往不够理想。💎 总结总而言之，Vue 3 引入 Composition API 并非要取代 Options API，而是为了提供一种​​更灵活、更强大、更适应现代前端开发需求​​的代码组织和复用方式。它特别适用于开发大型、复杂、需要高度可维护性和 TypeScript 支持的项目。对于简单的场景或初学者，Options API 因其直观性依然是一个很好的选择，Vue 3 也完全支持两者共存。但毫无疑问，Composition API 代表着 Vue 未来发展的方向。 希望这些解释能帮助你透彻地理解 Vue 3 引入 Composition API 的深远意义。作者：武天链接：https://juejin.cn/post/7562469833443672098来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

为什么Vue中的data属性是一个函数而不是—个对象？ Vue 中 data属性必须是一个函数而非对象，主要是为了​​确保每个组件实例拥有独立的数据副本，防止数据在多个实例间共享而造成状态污染​​。下面这个表格能帮你快速理解核心区别：特性对比​​data为对象​​​​data为函数​​​​数据共享性​​所有实例​​共享​​同一数据对象每个实例获得​​独立​​的数据副本​​数据隔离性​​修改一处数据，所有实例同步受影响（数据污染）实例间数据完全隔离，互不干扰​​适用场景​​仅适用于​​根实例​​（new Vue()），因为根实例通常只有一个​​必须​​用于所有​​可复用的组件​​定义中🔧 核心原因：避免数据污染Vue 组件是可复用的。如果 data直接是一个对象，那么所有用到这个组件的实例将​​共享同一个数据对象的引用​​。这意味着，如果你在一个组件实例中修改了数据，所有其他实例里的对应数据也会跟着改变，这显然不是我们想要的结果。 通过将 data定义为函数，每次创建组件实例时，Vue 都会调用这个函数，​​返回一个全新的数据对象副本​​。这样每个实例就能维护各自独立的数据了。这就好比是，如果大家共用一个水杯（对象），一个人喝水会影响所有人；但如果给每个人发一个自己的水杯（函数返回新对象），就互不干扰了。⚙️ 深层原理：JavaScript 对象引用这与 JavaScript 的语言特性有关。对象是​​引用类型​​。当 data是一个对象时，它会在内存中占据一个空间，所有实例都指向这个地址。而函数通过返回新对象的方式，确保了每个实例的数据都指向内存中的不同地址，从而实现了数据隔离。🌱 特殊情况的说明你可能会注意到，在创建 Vue 根实例（即 new Vue({...})）时，data可以是一个对象。这是因为根实例通常在一个应用中是​​唯一​​的，不存在被多次复用和共享的问题，因此可以直接使用对象。💎 总结简单来说，Vue 将 data设计为函数，是组件化开发的必然要求，核心目的是​​保证组件在复用时每个实例都能拥有独立的数据状态​​，避免意外的数据共享和污染。 希望这个解释能帮助你透彻地理解这个问题！如果你对 Vue 的响应式系统如何运作感兴趣，我们可以继续深入探讨。作者：武天链接：https://juejin.cn/post/7562354486638657571来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

单页应用如何提高加载速度？ 单页应用（SPA）的加载速度直接影响用户体验和业务指标。下面通过一个表格汇总核心优化策略，帮助你快速构建优化框架。优化维度核心目标关键技术与策略​​🔧 资源优化​​减小初始加载资源体积代码分割、懒加载、图片优化、Tree Shaking​​🌐 网络优化​​加速资源传输CDN加速、HTTP/2、Gzip/Brotli压缩、缓存策略​​⚡ 渲染优化​​提升页面渲染与交互速度服务端渲染(SSR)、静态生成(SSG)、骨架屏、虚拟滚动​​📊 持续优化​​保障长期性能性能监控、代码分析、自动化测试🔧 资源优化：减小加载体积这是优化的第一步，目标是让浏览器需要下载的东西更小、更少。​​代码分割与懒加载​​：这是SPA优化的基石。通过将整个应用代码按路由或组件拆分成多个小块，实现“按需加载”，而非一次性加载全部代码。在Vue和React中，可以分别使用动态导入import()语法或React.lazy结合Suspense来实现路由级懒加载。对于非首屏关键的组件（如弹窗、复杂图表），也可以进行组件级懒加载。​​图片与静态资源优化​​：图片通常是体积最大的资源。可采用以下措施：​​压缩与转换​​：使用现代格式如​​WebP​​，它通常比JPEG和PNG更小。​​懒加载​​：对首屏以下的图片使用懒加载，当用户滚动到附近时再加载。​​图标优化​​：使用字体图标（如Font Awesome）或SVG雪碧图来替代大量小图片，减少HTTP请求。​​清理代码​​：利用构建工具（如Webpack、Vite）的​​Tree Shaking​​功能移除未引用的代码。同时，审查第三方库，按需引入（例如，使用lodash-es替代整个lodash），或用更轻量的库（如dayjs替代moment.js）。🌐 网络优化：加速资源传输优化网络请求可以显著减少资源在路上的时间。​​CDN加速与HTTP/2​​：将静态资源（如JS、CSS、图片）部署到​​CDN​​上，利用其全球节点使用户从最近的服务器获取资源。同时，确保服务器支持​​HTTP/2​​，其多路复用特性可以同时传输多个请求，克服HTTP/1.1的队头阻塞问题。​​资源压缩​​：在服务器端开启​​Gzip​​或更高效的​​Brotli​​压缩，可以极大减小文本类资源的体积。​​缓存策略​​：设置合理的HTTP缓存头（如Cache-Control），让浏览器缓存静态资源，下次访问时可直接从本地读取。对于更复杂的场景，可以使用​​Service Worker​​实现离线缓存和更精细的缓存策略。⚡ 渲染优化：提升感知体验优化渲染过程能让用户更快地看到内容并与之交互。​​服务端渲染（SSR）与静态站点生成（SSG）​​：这是解决SPA首屏白屏问题的终极方案之一。​​SSR​​在服务器端生成完整的HTML再发送给浏览器，让用户立即看到内容（常用框架有Next.js for React, Nuxt.js for Vue）。​​SSG​​则在构建时预生成静态HTML，适用于内容相对固定的页面，速度极快。​​骨架屏（Skeleton Screen）​​：在内容加载完成前，先显示一个页面结构的轮廓（骨架屏），提升用户的等待耐心和感知速度。​​虚拟滚动（Virtual Scrolling）​​：对于需要渲染超长列表的场景，只渲染可视区域内的元素，大幅减少DOM节点数量，提升渲染性能。📊 持续优化：监控与迭代性能优化是一个持续的过程，需要可量化的数据和工具支持。​​性能监控​​：使用​​Lighthouse​​、​​WebPageTest​​等工具定期扫描，获取全面的性能评分和建议。同时，在生产环境使用​​Web Vitals​​等库监控真实用户的性能数据（如LCP, FID, CLS）。​​代码分析​​：利用​​Webpack Bundle Analyzer​​等工具可视化分析打包后的代码构成，快速定位体积过大的模块。希望这份全面的指南能帮助你系统性地提升SPA的加载速度。如果你对某个具体技术方案（如SSR的具体实现或Webpack的详细配置）有进一步的兴趣，我们可以继续深入探讨！作者：武天链接：https://juejin.cn/post/7562452972715343907来源：稀土掘金著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

如何打破scope对样式隔离的限制？ 在 Vue 项目中，当您需要调整子组件或第三方组件库的内部样式时，scoped属性的样式隔离机制可能会带来一些限制。不过，Vue 提供了一系列方法来“穿透”这层隔离。🔍 理解 Scoped 样式的原理Vue 中的 scoped样式是通过 ​​PostCSS​​ 在编译时转换实现的，并非真正的 CSS 作用域隔离。其核心原理是：​​添加唯一属性​​：Vue 会为当前组件的每个 DOM 元素添加一个唯一的属性，例如 data-v-f3f3eg9。​​转换 CSS 选择器​​：同时，Vue 会将组件内 scoped样式块中的每个 CSS 选择器末尾加上对应的属性选择器，如 .example会被转换为 .example[data-v-f3f3eg9]。这样，样式就只会作用于带有相同唯一属性的元素，从而实现组件样式的隔离。默认情况下，父组件的 scoped样式无法影响到子组件的内部元素，因为子组件内部的元素不会拥有父组件的唯一属性。🛠️ 打破限制的实战方案下表汇总了在不同场景下打破样式隔离的几种核心方法，帮助您快速选择：方法适用场景关键说明​​深度选择器​​需精确修改​​子组件内部​​特定元素的样式（最常用）Vue 2 和 Vue 3 语法有差异，详见下文。原理是让样式跳过属性追加，直接命中子组件内部元素。​​定义全局样式​​样式需要​​全局生效​​，或穿透方法无效时的备选方案在组件内使用不带 scoped的 标签，或使用 :global()伪类（Vue 3）。需注意可能造成样式污染。​​属性传递​​子组件设计良好，支持通过 ​​Props​​ 接收样式最符合组件化设计理念的方式，无需穿透CSS。前提是子组件提供了接收样式的接口。​​增加选择器权重​​覆盖​​非 Scoped​​ 的、权重较高的样式（如某些UI库的全局样式）通过增加选择器层级或谨慎使用 !important来提高自定义样式的优先级。使用深度选择器这是最直接和常见的样式穿透方式，但需要注意 Vue 版本间的语法差异。​​Vue 3 推荐语法：:deep()​​ 这是 Vue 3 中官方推荐且兼容性最好的写法。xml 体验AI代码助手 代码解读复制代码.parent-class :deep(.child-component-inner-class) { color: red;}编译后，选择器会变为 .parent-class[data-v-xxx] .child-component-inner-class，从而精准命中子组件内部的元素。​​Vue 2 语法：::v-deep或 /deep/​​ 在 Vue 2 中，主要使用 ::v-deep，早期也曾支持 /deep/或 >>>，但这些旧语法在 Vue 3 中已被废弃，不推荐使用。xml 体验AI代码助手 代码解读复制代码/ Vue 2 /.parent-class ::v-deep .child-component-inner-class { color: red;}定义全局样式如果样式需要全局生效，或者深度选择器效果不理想，可以定义全局样式。​​单独的全局样式块​​：在组件内同时使用带和不带 scoped的 标签。xml 体验AI代码助手 代码解读复制代码/ 全局样式，影响所有 .global-class 元素 /.global-class { font-size: 16px;}/ 本地样式 /.local-class { color: blue;}​​使用 :global伪类（Vue 3）​​：在 scoped样式块内定义全局规则，更适合与 CSS 预处理器配合。xml 体验AI代码助手 代码解读复制代码:global(.some-global-class) { margin: 10px;}通过组件属性传递样式对于设计良好的子组件（尤其是第三方UI库），最优方案是通过其提供的 Props 来传递样式，这完全避免了样式穿透的需求。例如，很多组件支持 class、style或自定义的 content-class等属性。增加选择器权重有时需要覆盖的样式本身是全局的且权重很高。这时可以通过​​增加选择器的层级和特异性​​来提高权重。css 体验AI代码助手 代码解读复制代码/ 通过更长的选择器链来提高权重 /.parent-container .some-ui-element .specific-class { color: red;}在万不得已时，才考虑使用 !important。⚠️ 最佳实践与注意事项​​精准定位​​：使用开发者工具检查子组件的​​真实类名​​，确保选择器准确无误。​​限定范围​​：使用深度选择器时，尽量将其嵌套在父组件的一个特定类名下（如 .parent-class :deep(...)），避免样式过度扩散影响其他组件。​​避免滥用​​：样式穿透会打破封装性，应仅在必要时（如定制第三方组件）使用。过度使用会导致样式难以管理和维护。​​Vue 版本​​：注意区分 Vue 2 和 Vue 3 的推荐语法，避免使用已废弃的语法。希望这份详细的指南能帮助您在实际项目中灵活地处理样式隔离问题！如果您对特定 UI 库的样式修改有更具体的场景，我们可以继续深入探讨。

说一下 vm.$set 原理 vm.$set（或全局的Vue.set）是 Vue.js 为解决响应式系统动态添加属性限制而提供的关键 API。为了让你快速把握全局，下表汇总了其核心原理与对比。关键方面​​直接赋值​​​​使用 vm.$set​​​​响应式能力​​新属性​​非响应式​​，数据变化视图不更新新属性​​是响应式​​的，数据变化触发视图更新​​实现机制​​普通对象属性赋值，Vue 无法拦截内部调用 Object.defineProperty/ splice，并触发依赖通知​​触发更新​​不会自动触发视图更新​​自动触发​​视图更新​​适用场景​​静态数据，无需响应式更新​​动态添加​​需要响应式追踪的属性🔧 核心原理：如何实现动态响应式vm.$set的本质是 ​​Vue 响应式系统的一个“补丁”机制​​。由于 Vue 2 基于 Object.defineProperty实现响应式，它只能在组件初始化时递归遍历并劫持 data 对象上​​已存在​​的属性。对于后来动态添加的属性，Vue 没有机会为其设置 getter/setter，因此无法追踪变化。 vm.$set的工作原理正是为了弥补这一限制，其内部逻辑主要针对两种数据类型进行处理：​​处理数组​​ 当目标 target是数组时，vm.$set内部会调用数组的 splice方法。Vue 已经重写了数组的变异方法（如 push, pop, splice等），这些方法在执行时会自动触发视图更新。因此，通过 splice插入新元素，能确保新元素被 Vue 侦测到并成为响应式的。​​处理对象​​ 对于对象，vm.$set的执行流程更为精细，其决策过程如下图所示：css 体验AI代码助手 代码解读复制代码flowchart TDA[调用 vm.$settarget, key, value] --> B{target 是否为数组?} B -- 是 --> C[使用 splice 方法插入值] B -- 否 --> D{key 是否已存在于 target 中?} D -- 是 --> E[直接赋值<br>因该属性已是响应式] D -- 否 --> F{target 是否为响应式对象?} F -- 否 --> G[直接赋值<br>因无需响应式处理] F -- 是 --> H[调用 defineReactive 方法<br>将新属性定义为响应式] H --> I[调用 ob.dep.notify<br>触发依赖更新] I --> J[视图更新] 从上图可以看出，最关键的一步是当​​为响应式对象添加新属性​​时，vm.$set会调用 defineReactive函数。这个函数是 Vue 响应式系统的核心，它利用 Object.defineProperty为属性 key添加 getter 和 setter，使其变得可追踪。完成后，它会通过 ob.dep.notify()通知所有依赖于此对象的“订阅者”（如组件的渲染函数）进行更新，从而立即触发视图刷新。💡 主要用途与典型场景​​动态扩展响应式对象​​：从 API 接口获取数据后，需要为现有对象添加新的响应式属性。​​初始化未声明的属性​​：在复杂表单或交互中，根据用户操作动态添加数据字段。⚠️ 重要注意事项​​目标限制​​：vm.$set的 target参数不能是 Vue 实例本身（如 this）或 Vue 实例的根数据对象（如 this.$data）。​​性能考量​​：虽然 vm.$set很强大，但频繁使用可能会触发多次渲染更新。对于已知的数据结构，应尽量在 data选项中预先声明所有属性，这是最佳实践。​​Vue 3 的改进​​：在 Vue 3 中，由于使用 Proxy实现响应式，Proxy可以代理整个对象，能天然拦截包括属性添加在内的各种操作。因此，在 Vue 3 中直接为响应式对象添加新属性也是响应式的，通常不再需要 vm.$set等价方法。希望以上解释能帮助你透彻理解 vm.$set的原理和作用。