我愿化作繁星

* src/main.css 或全局 CSS 文件 *//* 组合多个 tailwind 类 *//* 带响应式的组合 */rounded-md<style>解决方法检查的content配置是否包含组件路径。

按需加载是最常见的异步组件加载策略，即只有当组件需要被渲染时才进行加载。这种策略能有效减少初始加载的代码量，提高应用的首屏加载速度。在 Vue Router 中，异步组件常用于实现基于路由的代码分割，即只有当用户访问特定路由时才加载对应的组件。预加载策略是在组件实际需要渲染之前就提前加载组件，这样当需要使用组件时可以立即渲染，减少用户等待时间。分组加载策略是将多个相关的异步组件放在一组进行加载，适用于需要同时使用多个组件的场景。同时加载多个异步组件，当需要显示这些组件时，可以更快地渲染。

/ 处理自定义类型})

【代码】Vue3 虚拟 DOM diff 算法的源码解析。

的核心原理是通过类来管理副作用函数和依赖关系。在副作用函数执行过程中，自动收集所使用的响应式数据作为依赖。当这些依赖发生变化时，调度函数会被触发，重新执行副作用函数。同时，提供了清理机制，用于处理副作用函数重新执行或停止时的清理工作。

jobscheduler根据flush} else {if (!} else {job()Vue 3 的watch源码通过对不同类型的source进行解析，结合effect函数和调度器实现了数据的监听和回调执行。解析source生成getter函数。处理deep选项。定义job函数和调度器。创建副作用函数runner。根据选项决定是否立即执行。返回停止监听的函数。通过这种方式，watch可以灵活地监听不同类型的数据变化，并在合适的时机执行回调函数。

在Vue实例初始化时，为每个计算属性创建一个Watcher实例，并将其标记为懒执行。当访问计算属性时，触发计算属性的getter函数，调用Watcher的evaluate方法计算计算属性的值，并进行依赖收集。计算结果会被缓存起来，只有当依赖数据发生变化时，Watcher的dirty标记会被设置为true，表示需要重新计算。这样，Vue就实现了计算属性的缓存和自动更新功能。

在组件内部使用directives选项来注册局部自定义指令。<template>// 局部自定义指令// 指令钩子函数，在元素挂载后执行// 让元素获取焦点el.focus()</script>在上述代码中，定义了一个名为v-focus的局部自定义指令，当绑定该指令的元素挂载到 DOM 后，会自动获取焦点。在应用实例中使用方法来注册全局自定义指令，这样在整个应用中都可以使用该指令。// 全局自定义指令el.focus()})在main.js中注册了全局的v-focus。

在 Vue 3 的 Composition API 中，实现动态组件主要借助标签结合:is动态绑定属性，同时搭配响应式数据来控制显示不同的组件。以下将从基础实现、加载异步组件以及组件缓存三个方面详细介绍实现动态组件的方法。

在 Vue 3 中，如何缓存和复用动态组件，这有助于提高应用的性能，避免组件重复创建和销毁带来的开销。下面详细介绍其使用方法和相关配置。

JSX 是一种 JavaScript 的语法扩展，它看起来很像 HTML，但实际上是在 JavaScript 中编写的。它允许我们在 JavaScript 代码中直接嵌入 XML - 或 HTML - 风格的标记，从而让我们可以更直观地描述 UI 结构。\</h1>;这里的</h1>就是 JSX 语法，它最终会被转换为 JavaScript 代码来创建 DOM 元素。

在 Vue 3 中，和render函数可以结合使用来创建组件。

通过学习 Vue 高级组件的这些特性，我们可以更好地应对复杂应用的开发需求。渲染函数、函数式组件、异步组件、递归组件和插槽等功能，都为我们提供了更多的工具和方法来构建高效、可维护的 Vue 应用程序。希望本教程能帮助你进一步提升 Vue 开发技能。

就是在编码过程中应用这些自定义环境变量的时候，给出的智能提示。src目录下创建一个或者env.d.ts文件src同级别types目录下创建文件env.d.ts// 更多环境变量...在文件中专门用于处理项目src文件中的TypeScript配置文件，include配置项加入文件：(会提示自定义设置的环境变量)// ...// 第一种方式对应配置"vite-env.d.ts", // 或者 "env.d.ts"// 第二种方式对应配置。

不作为软件包的一部分来安装。您必须手动安装它们并将其添加为开发依赖项。这是一个设计决策，所以如果您只想使用。图片都需要写一次相对路径，并且对。图片进行压缩优化也不够方便。一个支持将你的样式表中的。文件内部的代码进行转换。资产，则可以选择跳过安装。图片的话，和图片压缩。

Proxy。

受到了影响，不会以浏览器窗口为基准了，这就不会满足我们的需求，此时就需要用到。比如弹窗，我们在父组件中引入了弹窗，但是由于父的容器加了特殊的。

通过使用 shallowRef()和 shallowReactive()来绕开深度响应。浅层式。

插槽：简单说就是父组件内部使用了子组件，但是子组件内部某些结构需要使用者自行定义，此时就需要用到插槽实现。数据在组件的自身，但根据数据生成的结构需要组件的使用者来决定。组件中，但使用数据所遍历出来的结构由。

注意：子组件中不用编写任何东西，是不受到任何打扰的。被子组件自己“消费”了)(相当于：组件中没被。提供的数据名称，第二个参数是默认值（假如未找到。中声明的属性(可以认为声明过的。接收两个参数，第一个参数是。【第二步】孙组件中使用。提供的数据名称就触发）

1. 安装`pinia`: `npm install pinia`\/`yarn add pinia` 2. 第二步：操作`src/main.ts` ``` import { createApp } from 'vue' import App from './App.vue' /* 引入createPinia，用于创建pinia */ import { createPinia } from 'pinia'

缺点: 后期项目上线，需要服务端配合处理路径问题，否则刷新会有。优点： 兼容性更好，因为不需要服务端处理路径。变成了两个`hooks。

Hook什么是hook?————本质是一个函数，把setup函数中使用的进行了封装，类似与Vue2中的mixin自定义hook的优势：复用代码，让setup中的逻辑更清楚易懂hooks文件夹中，每一个功能的hook文件期望是usexxx命名的hook的出现诠释了的终极意义示例代码useSum.ts中内容如下：})})useDog.ts中内容如下：try{getDog()})组件中具体使用：<template><div>

用在子组件上，父组件想要访问子组件内的数据，需要使用。

定义的【对象类型】数据：直接写数据名，监视的是对象的【地址值】，若想监视对象内部的数据，要手动开启深度监视。定义的【基本类型】数据：直接写数据名即可，监视的是其。定义的【对象类型】数据, 默认开启深度监视。作用：根据已有数据计算出新数据（和。定义的【对象类型】数据的。

f是将变量转换成ObjectRefImpl类型的数据，等同于。定义的响应式对象属性过多，解构是比较好的选择，我们不需要。b. 我们想要把解构的变量也变成响应式的，此时就需要用到。定义的响应式对象内的每一项都转换为响应式数据，我们打开浏览器看下控制台,主要看下两个输出，,所以解构出来的变量不是响应式的，定义的响应式数据，所以修改我们需要。a. 但是单纯的结构，相当于。我们在模板中就可以直接使用。定义对象类型的响应式数据和。

可以用函数的方式，更加优雅的组织代码，让相关公告的代码更加有序的组织在一起。，不便于维护和复用Composition API。

性能的提升打包大小减少41%初次渲染快55%，更新渲染快133%内存减少54%源码的升级使用Proxy代替实现响应式重写虚拟DOM的实现和拥抱TypeScriptVue3可以更好的支持TypeScript新的特性(组合Apisetupref和reactivecomputed与watch新的内置组件：FragmentTeleportSuspense其他改变：新的生命周期钩子data选项应始终被声明为一个函数移除keyCode支持作为v-on的修饰符。