日常笔记/总结/系列知识梳理

通过模板引用，你可以在组件的 JavaScript 代码中引用模板中的特定元素或组件，从而能够直接操作它们或访问它们的属性和方法。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。函数是组合式 API 的核心，它提供了一个新的逻辑组织方式，允许你使用响应式状态、计算属性、方法、生命周期钩子等，而不必依赖于 Vue 组件的选项对象。函数返回一个对象，该对象中的属性将在模板中作为组件的响应式状态、方法或计算属性来使用。

Vue 3 引入了组合式 API（Composition API），它是一种新的 API，用于构建 Vue 组件的逻辑。在 Vue 3 的组合式 API 中，生命周期钩子可以通过导入相应的函数来使用。组合式 API 的核心思想是将组件的逻辑分割成更小的函数（或称为“组合函数”），这些函数可以根据需要被引入和重用。这有助于将组件的逻辑划分为更小的、更易于管理的部分，并提高了代码的可读性和可维护性。这些钩子函数接收与选项式 API 中的生命周期钩子相同的参数，并允许你以函数式的方式处理组件的生命周期事件。

这是响应体的结果，也就是服务器返回的数据。：这是生成此响应的请求，也就是 Axios 在发送请求时所创建的原生的 AJAX 请求对象。：这是响应的 HTTP 状态信息，是一个字符串，描述了状态码的含义，如 ‘OK’、‘Not Found’ 等。通过使用拦截器，你可以更加灵活地控制 Axios 的请求和响应处理流程，提高代码的可维护性和可扩展性。：这是响应的头信息，所有的 header 名称都是小写，可以使用方括号语法访问，例如。：这是 Axios 请求的配置信息，包括请求类型、请求的 URL、请求体等。

Vue 允许你为选项定义自定义的合并策略。你可以通过方法来实现这一点。

路由元信息（Route Meta）允许你在路由配置中定义一些自定义信息，这些信息可以在路由守卫（Navigation Guards）或其他地方使用。Vue Router 提供了许多高级功能，包括路由元信息配置、嵌套路由和动态路由匹配。嵌套路由允许你创建一个多级导航结构，你可以在一个路由内部定义子路由。动态路由匹配允许你定义可变的 URL 部分，用于匹配不同的参数。提供了一些属性来定制链接的行为和外观。事件，并阻止其默认行为（即阻止页面跳转），除非。默认的标签，如果指定了的话）。在 Vue 3 中，

在 Vue 3 中，表单的处理方式与 Vue 2 非常相似，但由于 Vue 3 采用了 Composition API，所以表单处理在逻辑组织上可能会更加清晰。在使用修饰符时，请确保它们是你真正需要的，并且理解它们的工作原理和潜在的性能影响。在表单提交时，这通常用于阻止表单的默认提交行为，并允许你使用 Vue 的方法来处理提交。如果你想要更详细的控制，比如知道每个复选框是否被选中，你可以使用对象来追踪复选框的状态。如果你有一组复选框，并且你想知道哪些被选中了，你可以使用数组或对象来追踪这些值。

在 Vue 组件中，你可以使用$emit方法触发自定义事件，并在父组件中监听这些事件。-- ChildComponent.vue --> < template > < button @click = " emitClick " > 点击我 < script > export default {emit }) {// 触发名为 "click" 的自定义事件 };return {

然而，这种方式不会触发 Vue 的样式更新，因为它只是一个普通的字符串，而不是一个响应式对象或数组。对象语法允许你通过一个对象来动态地绑定样式。是一个响应式引用，它包含一个对象，该对象定义了要应用到 div 元素上的样式。属性上，但这种方式不推荐，因为它不会享受到 Vue 的响应式系统的优势。你可以使用对象语法或数组语法来动态地绑定样式。当这些引用的值改变时，Vue 会自动更新元素的类列表。除了直接绑定样式之外，你还可以动态地绑定类名到元素的。在 Vue 3 中，样式绑定通常是通过绑定到元素的。

computed适用于根据其他响应式数据动态计算出一个新值，并且这个值需要被频繁读取的场景。watch适用于在数据变化时需要执行某些操作（如副作用）的场景，特别是当你需要访问变化前后的值或需要执行异步操作时。

Vue 3 的生态系统还包含了许多第三方库和组件，如UI库（如Vuetify、Element Plus、Quasar等）、工具库（如Vuex、Vue Router、axios等）和插件，这些都可以帮助开发者更高效地构建Vue应用程序。但是，Vue 3 官方提供了几个核心库和插件，这些库和插件是构建Vue应用程序时常用的，并且与Vue 3紧密集成。在 Vue 3 中，组件的创建和使用与 Vue 2 有一些不同，尤其是在组合式 API 的引入下。在这个例子中，我们使用了 Vue 3 的组合式 API (

在大多数情况下，Vue 的优化足以让这两种方式在性能上相差无几，因此选择哪种方式更多是基于代码的可读性和维护性的考虑。对于更复杂的条件逻辑，你可以使用计算属性来返回一个布尔值，并在模板中使用这个布尔值来决定是否渲染某个元素。是一个“真正的”条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。类似，但它不会基于条件来添加或移除元素，而是简单地切换元素的 CSS 的。

在 Vue 3 中，表达式是模板语法中的一个重要概念，它允许你在模板中嵌入 JavaScript 代码来动态地渲染内容、计算值或执行方法。在 Vue 3 中，修饰符（Modifiers）是与指令一同使用的特殊标记，用于修改指令的默认行为。可以在模板中插入 JavaScript 表达式，表达式的值会被计算并插入到 HTML 中。，它用于在监听滚动或触摸事件时优化性能，因为它告诉浏览器你不想阻止这些事件的默认行为。来包裹表达式，这些表达式会在 Vue 实例的数据或方法发生变化时自动更新。

注册自定义指令有两种方式：全局注册和局部注册。全局注册的指令可以在任何 Vue 实例中使用，而局部注册的指令只能在特定的 Vue 实例或组件中使用。// 全局注册// 当被绑定的元素插入到 DOM 中时……// 聚焦元素el.focus()})// 局部注册// 定义指令})在 Vue 3 中，自定义指令允许你注册一些可以在模板中重复使用的行为。这些行为可以附加到任何元素上，并在元素的特定生命周期钩子中执行自定义逻辑。

你可以选择默认配置（Default）来快速创建一个项目，或者手动选择特性（Manually select features）来定制你的项目。Vue CLI 是一个强大的工具，它可以帮助你快速搭建 Vue.js 项目，并且内置了对 Vue Router、Vuex、CSS 预处理器、PWA 支持、单元测试等的集成。命令是 Vue CLI 中的一个重要命令，用于创建新的 Vue.js 项目。这将创建一个优化过的、用于生产环境的版本在你的项目目录下的。这个命令将直接为你创建一个使用 Vue 3 的项目。

Vue3是Vue.js框架的第三个主要版本，于2020年9月18日发布，代号为“One Piece”。Vue3在性能、体积、TypeScript支持、API设计等方面都有显著的提升和改变。性能提升：Vue3通过源码的升级，如使用Proxy代替defineProperty实现响应式，重写虚拟DOM的实现和Tree-Shaking，使得打包大小减少了41%，初次渲染速度提升了55%，更新渲染速度提升了133%，内存减少了54%。