科技D人生

Vue 3.6 带来重大性能突破：Vapor Mode 与响应式系统升级Vue 3.6 通过 Vapor Mode 和响应式系统改进实现性能飞跃。Vapor Mode 直接编译为 DOM 操作代码，跳过虚拟 DOM 环节，使包体积缩减 88%（从 50KB 降至 6KB），10 万组件挂载仅需 100ms。新响应式系统 "Alien Signals" 实现细粒度更新，内存使用减少 14%。

// 定义属性});// 使用属性父组件

要想修改三方组件样式，只能添加到 scoped 之外，弊端是污染了全局样式，后续可能出现样式冲突。

直接通过图形用户界面删除依赖可能会有上万个文件和文件夹，那么就使得操作系统需要花费非常多的时间来处理每一个文件的删除。：操作系统有可能需要花时间去刷新文件系统的缓存，特别是对于那些频繁访问的文件或目录。：如果某些进程正在使用中的文件，也就是被正在引用，那么这些文件将无法被删除的，会弹出提示直到相关的进程释放。：硬盘或SSD的读写速度也可能成为瓶颈，尤其是在比较老机械硬盘上，随机读写的性能较低就会特别慢。：图形界面的文件管理器在处理大量文件时，可能会因为UI的更新和绘制而变慢。

ref在 Vue3 中提供了一种更统一、灵活的响应式解决方案，还能避免了reactive的某些局限性。

实际上对Vue3.5在性能方面起到大作用的是双向链表，version计数器属于是锦上添花。但通过分析globalVersion、dep.version如何自增，以及如何快速判断是否需要更新的逻辑，其实对双向链表也了解的八九不离十。双向链表上，横向是订阅者Sub依赖的Dep的链表节点，而纵向上是响应式value对应Dep关联的订阅者的链表节点。

微前端是一种多个团队通过独立发布功能的方式来共同构建现代化 web 应用的技术手段及方法策略。“类似Iframe，却没有它的各种问题。”微前端最核心的价值或者特性，就是技术栈无关。通常我们在构建web应用时，会有同一框架、同一大版本的限制。微前端的这个特性就打破了传统web的限制。我们利用这个特性，做到 应用拆分聚合、增量升级。再结合实际的场景，来解决问题。比如，应用拆分可以做到模块化开发、降低项目复杂性、提升部署效率和不同团队之间项目耦合性的问题。

在 Vue 3 中，Hook 函数是一种特殊的函数，用于封装可重用的逻辑和状态管理。Hook 函数允许你在 Vue 组件中提取和复用逻辑，而不是将所有逻辑都放在组件的选项对象中。它们可以帮助你更好地组织代码，提高代码的可维护性和可测试性。Hook 函数的特点：可重用性：Hook 函数可以在多个组件中重复使用，避免了重复编写相同的逻辑。逻辑封装：将特定的逻辑封装在 Hook 函数中，使组件的代码更加清晰和易于理解。状态管理：Hook 函数可以用于管理组件的状态，包括响应式数据和副作用。

在 Vue.js 应用中，路由懒加载可以延迟加载路由组件直到它们被需要时才加载，从而减少应用的初始加载时间。使用构建工具如 Vite 或 Webpack 的代码分割功能，可以将代码拆分成多个块，按需加载。确保在生产环境中使用合适的构建配置，如压缩 JavaScript、CSS 和 HTML。减少组件的响应式数据，可以减少 Vue 的响应式系统需要追踪的变化，从而提升性能。合理配置 HTTP 缓存策略，可以减少服务器的负载和用户的等待时间。可以自动追踪依赖并缓存结果，避免不必要的计算。对于频繁切换的情况，

弊端就像之前的，如果该原生提供了许多插槽，当有需要时岂不是频繁去修改自定义组件添加相应的插槽。：这样的情况多了，就有点难顶。每次一有新的需求，我就得改这个组件，导致这个组件代码越来越冗余。有时我们需要进行个性化封装，以满足在项目中大量使用的需求。2.如果父组件传递了style，class，那么这这些值不仅会存在于。官网的这段话简明扼要的说出的插槽的原理，我们所传递的插槽最终都是变成。中的值，有什么插槽我们便动态绑定什么插槽。，后续项目的弹窗全部基于该自定义组件。怎么使用插槽，自定义组件就怎么使用插槽。

在 Vue 3 中，Teleport 是一个新的内置组件，它允许你将子组件或 DOM 元素渲染到指定的 DOM 节点之外。简而言之，你可以将某个组件“传送”到另一个地方，而不必让它们局限于父组件的 DOM 树结构中。

组件系统是 Vue的一个重要概念，让我们可以用独立可复用的小组件来构建大型应用。几乎任意类型的应用的界面都可以抽象为一个组件树：从组件类型来说，Vue中的组件主要分为三种：页面组件、业务组件、基础组件。

Sass(Scss)、Less 都是，他们定义了一种新的语言，其基本思想是，用一种专门的编程语言为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行 CSS 的编码工作。

npm 是 Node.js 的默认包管理器；cnpm 是淘宝 NPM 镜像的命令行工具，用于加速安装依赖包；npx 是 npm 5.2.0 版本后内置的命令行工具，用于临时运行依赖包的可执行文件；yarn 是 Facebook 开源的包管理器，以速度快和安全可靠著称；pnpm 是一个快速、零配置的包管理器。

响应式是指当数据发生变化时，系统会自动更新与数据相关的 DOM 结构。在 Vue2 中，响应式系统的实现基于。然而，有一些局限，如：无法监听数组的变化、需要遍历对象的每个属性进行监听、性能开销较大。在 Vue3 中，响应式系统的实现基于 ES6 的Proxy对象。Proxy可以直接监听对象和数组的变化，而无需对每个属性进行监听，从而大大提高性能。同时，Proxy也可以解决无法监听数组的问题。的关键在于 vue 的依赖收集机制。

【代码】Vue.js 学习总结（3）—— vite 打包图片时报错 Rollup failed to resolve import...

一、开发前准备：Vue项目通常通过webpack工具来构建，而webpack命令的执行是依赖node.js的环境的，所以首先要安装node.js。(官方地址：https://nodejs.org/en/download/)注意：安装完node之后，npm包含的很多依赖包是部署在国外的，在天朝，大家都知道下载速度是超级慢啊。所以我们要安装cnpm，cnpm是淘宝对npm的镜像服务器，这样依赖

Vue.js是一套构建用户界面的 “渐进式框架”。与其他重量级框架不同的是，Vue 采用自底向上增量开发的设计。Vue 的核心库只关注视图层，并且非常容易学习，非常容易与其它库或已有项目整合。2016年，Vue同Angular、React形成三足鼎立的局面，让前端的开发者顾不暇接，今天我们就来了解一下Vue的环境搭建。一、Node.js安装Vue项目通常通过webpack工具来构建，而we