卡拉米

在网络请求中，流（stream）表示持续接收数据的过程。使用流，前端可以逐步获取服务器响应，而不是等待整个响应完成后一次性获取。这种方式对于大文件或数据的传输特别有用，因为它能有效管理内存并提高传输效率。

React、Vue.js和Angular都是当前流行的前端框架，它们各有优缺点，对于初学者的适合程度也有所不同。

‌函数定义与作用‌函数是C语言中完成特定任务的独立代码块，分为‌库函数‌（标准库提供）和‌自定义函数‌（开发者编写）‌12。类比“模具”：库函数如现成的经典模具，自定义函数如按需定制的模具‌4。‌函数的价值‌支持代码复用，减少冗余；通过模块化设计提升程序的可读性和维护性‌

‌父子组件通信‌‌跨层级/兄弟组件通信‌‌核心概念‌‌模块化设计‌ 三、‌组件设计原则与优化‌ ‌高内聚、低耦合‌‌组合式函数（Composables）‌ 四、‌性能优化策略‌ ‌计算属性与监听器‌‌惰性加载模块‌‌Vue Devtools‌‌TypeScript 支持‌高效管理 Vue 组件状态需根据场景选择通信方式（父子用 ，复杂场景用 ），遵循组件设计原则（高内聚、单一职责），结合组合式函数和性能优化策略（惰性加载、计算属性），同

在 Vue 3 中，如果你遇到事件触发一次但方法执行多次的情况，这通常是由于事件监听器被多次绑定导致的。

是一种允许服务器主动向客户端推送实时更新的技术。与WebSocket相比，SSE更为简单，且只支持从服务器到客户端的单向通信，这使其在某些场景下（如实时新闻更新、股票行情推送等）成为理想的选择。SSE是一种简单而有效的实时通信技术，适用于从服务器到客户端的单向数据推送场景。通过渐进式学习路径和实践案例，您可以逐步掌握SSE的使用技巧，并将其应用到实际项目中。虽然SSE有一些限制，但在许多情况下，它仍然是一个非常好的选择。享受实时通信带来的便利吧！

目标读者：本教程适用于具备基本Vue3知识的前端开发者，特别是那些希望通过Element Plus提升项目UI质量和开发效率的开发者。学习目标了解Element Plus与Vue3的基本集成方式。掌握常用Element Plus组件的使用方法。学会自定义Element Plus的样式以满足项目需求。掌握Element Plus在实际项目中的最佳实践。

前端（Front-end）是指用户直接接触到的网页部分，包括网页的结构、样式和交互功能。前端开发者的任务是创建用户友好的界面，使用户能够方便地访问和操作网站或应用程序。前端开发是一个快速发展的领域，掌握HTML、CSS和JavaScript是成为前端开发者的基础。随着技术的演进，学习并熟悉现代前端框架、工具和最佳实践将帮助你在这个领域取得成功。保持对新技术的关注和学习，将有助于你在前端开发的职业生涯中不断成长。

通过学习HTML、CSS和JavaScript，你将能够构建出功能丰富且美观的网页。保持实践和探索新技术的热情，将有助于你在前端开发领域不断成长。希望这篇指南能帮助你顺利入门前端开发！

前端是指用户在浏览器中看到和交互的部分，主要涉及网页的结构、样式和行为。它是Web开发的一个重要组成部分，与后端（服务器端）相对应。前端开发是现代Web开发的重要领域，涉及网页的结构、样式和交互。作为一名前端开发者，你将负责创造用户友好的界面，并提供良好的用户体验。随着技术的发展，前端开发的工具和框架也在不断演进，因此保持学习和更新技能是非常重要的。希望这一天的学习能为你今后的前端开发之路打下坚实的基础！

Vue 3 的双向绑定机制是现代前端开发中的一个关键技术。它使得数据和界面的同步变得轻而易举，为开发者提供了更高效、更可靠的开发体验。掌握了双向绑定的原理和应用，你将能够更加灵活地构建响应式、实时性强的前端应用程序。

通过以上步骤，你可以成功构建一个包含登录和注册页面的Vue3项目。当然，这只是一个简单的示例，实际应用中可能还需要根据具体需求进行更多的定制和优化。

**生命周期钩子**：Vue实例在其生命周期的不同阶段会触发一些钩子函数，例如`created`、`mounted`、`updated`和`destroyed`，开发者可以在这些钩子中添加自定义逻辑。- **灵活性**：Vue可以作为一个库嵌入到现有项目中，也可以作为一个完整的框架来构建复杂的单页面应用。- **实例**：每个Vue应用都是通过`new Vue()`创建的一个Vue实例。- **Vue CLI**：一个强大的脚手架工具，可以快速生成Vue项目的基础结构，并提供了热重载、构建优化等功能。

重新安装依赖yarn add element-plus。

由于App.vue文件是入口，因此，在App.vue中写入组件后，路由匹配到的组件将会渲染到 router-view中。App.vue中的组件采用了Element UI 的进行页面布局。

指令均为文本插值指令，不同点在于。代码并让浏览器渲染，而。

指令用于执行一次性的插值，当后续绑定的变量再次发生变化时，插值处的内容不会发生任何变化, 也就是说它只会被渲染一次。来表示，当其绑定的变量发生变化时，插值的内容也会随之发生变化，也就是数据双向绑定功能：{{ 插值表达式 }}插值表达式支持四则运算、比较运算符、数值操作、三目运算符、数组操作、对象操作等。双大括号的形式外，还可以使用。文本插值语法如下，通常用。

指令用于执行一次性的插值，当后续绑定的变量再次发生变化时，插值处的内容不会发生任何变化, 也就是说它只会被渲染一次。来表示，当其绑定的变量发生变化时，插值的内容也会随之发生变化，也就是数据双向绑定功能：{{ 插值表达式 }}插值表达式支持四则运算、比较运算符、数值操作、三目运算符、数组操作、对象操作等。双大括号的形式外，还可以使用。文本插值语法如下，通常用。

创建一个vue项目：不懂得看一下文档创建一个vue项目 【Vue3】保姆级毫无废话的进阶到实战教程 - 01_vue3新项目-CSDN博客。

在 Composition API 搭配 的情况下，可以将所有逻辑代码直接写在内，就跟写原生 Javascript 的感觉很像，几乎没有什么特殊规则，交由开发者自行管理。● Option API 形式下，Vue 已经帮开发者做好了响应式，自动为 data 中的数据加上响应性，其他选项要取用 data 内的数据时，用 this.变量名 取得即可。一个功能使用到的 data、method，声明位置可以比较靠近，对于大的、复杂的组件来说，会提升可读性。

这个实际上在官方是有说明的：sfc-script-setup，但是却没有做更进一步的解释了。 是在单文件组件 (SFC) 中使用组合式 API 的编译时语法糖。当同时使用 SFC 与组合式 API 时该语法是默认推荐。相比于普通的 语法，它具有更多优势： 写法为什么要 return？查了一些资料，结论是是因为 SFC 会将 和 中的内容编译成组件的渲染函数。而 和 在性能上的差异，就在于渲染函数从 中取得 所需变量的方式不同。 使用 开发的组件，还是会被编译成回传组件，而不是直接回传给渲染

除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。用于将 Vue 实例的数据绑定到 HTML 元素的属性上。指令实现表单数据双向绑定。

【代码】Vue3 目录结构解析。

混入 (mixins)定义了一部分可复用的方法或者计算属性。混入对象可以包含任意组件选项。当组件使用混入对象时，所有混入对象的选项将被混入该组件本身的选项。

设置 replace 属性的话，当点击时，会调用 router.replace() 而不是 router.push()，导航后不会留下 history 记录。请注意，我们没有使用常规的 a 标签，而是使用一个自定义组件 router-link 来创建链接。例如，我们从 /a 导航到一个相对路径 b，如果没有配置 append，则路径为 /b，如果配了，则为 /a/b。当被点击后，内部会立刻把 to 的值传到 router.push()，所以这个值可以是一个字符串或者是描述目标位置的对象。

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。下面我们注册一个全局指令 v-focus, 该指令的功能是在页面加载时，元素获得焦点实例使用 directives 选项来注册局部指令，这样指令只能在这个实例中使用。

用 v-model 指令在表单及等元素上创建双向数据绑定v-model 会根据控件类型自动选取正确的方法来更新元素。v-model 会忽略所有表单元素的 value、checked、selected 属性的初始值，使用的是 data 选项中声明初始值。valueinputcheckedchangevaluechangeinput 和 textarea 元素中使用 v-model 实现双向数据绑定。

我们可以使用 v-on 指令来监听 DOM 事件，从而执行 JavaScript 代码。指令可以缩写为符号或v-on 可以接收一个定义的方法来调用。除了直接绑定到一个方法，也可以用内联 JavaScript 语句事件处理程序中可以有多个方法，这些方法由逗号运算符分隔。

当你在带有单个根元素的自定义组件上使用 class 属性时，这些 class 将被添加到该元素中。class 与 style 是 HTML 元素的属性，用于设置元素的样式，我们可以用 v-bind 来设置样式属性。v-bind 在处理 class 和 style 时， 表达式除了可以使用字符串之外，还可以是对象或数组。可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值。如果你的组件有多个根元素，你需要定义哪些部分将接收这个类。设置一个对象，从而动态的切换。

每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。组件（Component）是 Vue.js 最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码，可以帮助你将用户界面拆分成独立和可复用的部分。每个 Vue 组件都是一个独立的 Vue 实例，具有自己的模板、数据、方法和生命周期钩子，使得组件可以自包含地定义和管理自己的功能和样式。

在 Vue 中，循环语句主要通过 v-for 指令来实现，用于遍历数组或对象，生成对应数量的元素。在元素上使用 v-for 指令，根据源数据的数组或对象进行循环渲染元素。遍历数组遍历对象v-forkeyv-forv-for 可以绑定数据到数组来渲染一个列表v-for 还支持一个可选的第二个参数，参数值为当前项的索引。

在 Vue 3 中，你可以在模板中使用多种条件语句来控制组件的渲染。主要的条件语句有v-ifv-else-ifv-else和v-showv-iffalsev-showv-else-ifv-elsev-if。

除了这些常用的指令，Vue 还提供了一些其他的指令，如 v-text、v-html 等，以及自定义指令，让开发者能够更加灵活地操作 DOM 元素。开头的特殊属性形式使用，用于将响应式数据绑定到 DOM 元素上或在 DOM 元素上进行一些操作。v-show 是 Vue.js 提供的一种指令，用于根据表达式的值来条件性地显示或隐藏元素。用于在 HTML 元素上绑定事件监听器，使其能够触发 Vue 实例中的方法或函数。用于将 Vue 实例的数据绑定到 HTML 元素的属性上。指令实现表单数据双向绑定。

【代码】Vue3 目录结构解析。

app.vue是vue页面资源的首加载项，是主组件，页面入口文件，所有页面都是在App.vue下进行切换的；也是整个项目的关键，app.vue负责构建定义及页面组件归集。

的缺点之后，我们用最新的 来改写一下上面的这个例子 你可以在组件中这么使用 这不仅可以控制对外暴露哪些数据，还可以你在使用的时候通过解构来重命名你的变量和方法，很好地解决了 的那些问题。很多初学者可能会觉得这个心智模型有点难，其实就很简单，比如封装一个常用的 API 请求的 怎么用呢？ 只要可复用的逻辑，都应该封装成公共方法或者 ，如果这段逻辑中使用了 ，那你就封装成以 开头的 ，否则，就将其封装成普通的公共方法。它跟 一模一样（比如 和 ，还是不一样的），只能说是基本相同 目前还是默

Hooks在 Vue 3 中，可以使用来封装可重用的逻辑，类似于 React 中的 Hooks。通过自定义 Hooks，我们可以将可重用的逻辑封装起来，并在多个组件中共享使用。这样可以提高代码的可维护性、重用性和可读性，避免了代码重复，并且使组件更加关注自身的业务逻辑。并且 hook 具有良好的命名空间和类型推导，易于测试等特性。将窗口大小的逻辑封装成一个可重用的函数，并且与具体的组件解耦。其他组件只需要导入并调用，就可以获取窗口大小，而不需要重复编写监听器和逻辑。useFetch。

在 Vue 3 中，你可以使用多种方式来请求接口（API）。最常见的方法是使用原生的fetchAPI 或流行的第三方库如 Axios。以下是使用这两种方法分别进行 API 请求的示例。

defineProperty 注意区分大小写。

返回迭代器对象，其中包含 Map 中的 [key, value] 键值对。如果键存在于 Map 中，则返回 true。为 Map 中的每个键/值对调用回调函数。返回迭代器对象，其中包含 Map 中的键。返回迭代器对象，其中包含 Map 中的值。