vue的增量式学习-篇章3

vue的增量式学习-篇章3， 又名：写毕设到企业级前端（第6天）

vue的增量式学习-篇章3，又名：写毕设到企业级前端（第6天）

目录

• 1. 基础概念
  • Props
  • 事件
  • 组件 v-model
  • 透传 Attributes
  • 插槽
  • 依赖注入
  • 异步组件
  • 逻辑复用
  • 组合式函数
  • 自定义指令
• 2. 内置组件
  • Transition
  • TransitionGroup
  • KeepAlive

1. 基础概念

Props：

• 概念：Props 是从父组件传递数据到子组件的一种机制，用于实现组件之间的通信。父组件可以将数据传递给子组件，并在子组件中使用这些数据。

• 应用场景：使用 Props 来将数据从父组件传递给子组件，以便在子组件中显示、处理或修改这些数据。

• 示例代码：

事件：

• 概念：事件允许组件在特定的交互或状态变化时发出通知，以便其他组件能够响应并执行相应的操作。Vue 使用 @ 或 v-on 来监听和处理事件。

• 应用场景：使用事件来实现组件之间的通信，例如在子组件中触发事件，然后父组件监听并响应该事件。

• 示例代码：

组件 v-model：

• 概念：v-model 是 Vue 中的语法糖，用于双向绑定数据。它允许父组件通过 v-model 在子组件上进行属性绑定，并监听子组件的事件来更新数据。

• 应用场景：使用 v-model 来实现父组件与子组件之间的双向数据绑定。

• 示例代码：

透传 Attributes：

概念：
在 Vue 中，当你使用一个自定义组件时，该组件的根元素是由组件自身的模板定义的。然而，有时你可能希望将一些额外的 HTML 属性传递给组件的根元素，以确保组件能够正常工作或与其他库/框架集成。

示例代码解释：
假设你有一个自定义按钮组件 CustomButton，它接受一个 type 属性，并且应该将这个属性应用到按钮元素上。但你不希望在组件的模板中显式地定义 type 属性，而是希望该属性能够透传给组件的根元素。

以下是 CustomButton 组件的示例代码：

在这个示例中：

1. 我们在 元素上使用了 v-bind="$attrs"，这表示将所有未在组件中处理的属性透传给按钮元素。
2. 使用透传后，父组件可以像这样使用 CustomButton：

在这个示例中，type 属性将会传递给 CustomButton 组件的根元素 ，确保它被正确设置为 "submit"。

这种透传属性的机制使得自定义组件更加灵活，能够与外部环境集成，并确保不会丢失传递给组件的属性。

插槽：

• 概念：插槽是一种将内容插入组件内部的机制，允许父组件向子组件传递内容，并控制内容的显示位置。

• 应用场景：使用插槽来自定义组件的内容，使组件更灵活，适应不同的用例。

• 示例代码：

依赖注入：

• 概念：依赖注入是一种在父组件中提供数据，以便子组件可以访问的机制。它允许在父组件中定义一些数据，然后在整个组件树中共享。
• 应用场景：使用依赖注入来共享数据、配置或其他全局资源，以避免在每个子组件中进行显式传递。
• 示例代码：Vue 3 中的依赖注入 API 为 provide 和 inject，示例较为复杂，可根据具体需求编写。

<!-- ThemeConfig.vue -->
<template>
  <div>
    <!-- 使用 provide 注入主题配置 -->
    <provide :themeConfig="themeConfig">
      <slot></slot>
    </provide>
  </div>
</template>

<script>
export default {
  data() {
    return {
      themeConfig: {
        primaryColor: 'blue',
        secondaryColor: 'green',
      },
    };
  },
};
</script>

<!-- ThemeButton.vue -->
<template>
  <button :style="{ backgroundColor: themeConfig.primaryColor }">
    Click me
  </button>
</template>

<script>
export default {
  inject: ['themeConfig'],
};
	</script>

异步组件：

• 概念：异步组件是一种按需加载的组件，它们在需要时才会被加载和渲染，以提高应用程序的性能。
• 应用场景：使用异步组件来延迟加载页面中不常用的组件，以减小初始加载时间。
• 示例代码：

有两个组件：Home.vue和About.vue，并且您想按需加载About.vue组件。

首先，创建一个About.vue组件，内容如下：

接下来，在您的路由配置中，确保您使用了Webpack的import()函数来动态导入About.vue组件。假设您正在使用Vue Router来进行路由配置，您的路由配置可能如下所示：

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    component: () => import('./views/Home.vue') // 首页组件是同步加载的
  },
  {
    path: '/about',
    component: () => import(/* webpackChunkName: "about" */ './views/About.vue') // 异步加载About组件
  }
]

const router = new VueRouter({
  routes
})

export default router

在上面的代码中，About.vue组件是使用import()函数进行异步加载的。Webpack会将它打包成一个独立的文件，只有在用户首次访问该路由时才会加载。

最后，您可以在您的应用中使用标签来导航到/about路由，触发异步加载：

这就是一个简单的异步组件的案例。当用户点击“Go to About Page”链接时，Vue会按需加载About.vue组件，而不是在应用加载时立即加载它。这有助于减小初始包的大小，提高应用性能。

请注意，上述示例中的路由配置可能基于Vue Router的使用方式。确保您的项目中有适当的Vue Router配置和Webpack设置以支持异步组件加载：

1. Vue Router 配置：

   在Vue Router中，您需要使用import()函数来动态导入组件，并将其配置为路由的component属性。这告诉Vue Router按需加载组件。

   const routes = [
     {
       path: '/',
       component: () => import('./views/Home.vue') // 同步加载
     },
     {
       path: '/about',
       component: () => import(/* webpackChunkName: "about" */ './views/About.vue') // 异步加载
     }
   ]
   
   

   请注意，上面的示例中，我们使用了注释/* webpackChunkName: "about" */来指定Webpack生成的异步组件的名称。这是可选的，但可以帮助您在生成的文件中更好地识别异步组件。

2. Webpack 配置：

   您不必手动更改Webpack的配置文件，因为Vue CLI（如果您使用它来创建Vue项目）已经为您配置了异步组件加载的设置。Webpack会自动生成异步加载的代码块。

   如果您不使用Vue CLI，而是手动配置Webpack，确保您的Webpack配置中启用了splitChunks插件或类似的功能，以便将异步组件打包成单独的文件。

   以下是一个可能的Webpack配置示例（要根据您的实际项目进行调整）：

   // webpack.config.js
   
   const path = require('path');
   
   module.exports = {
     // ...其他配置...
     optimization: {
       splitChunks: {
         chunks: 'all'
       }
     }
   };
   
   

   这个配置将帮助Webpack将异步组件打包到单独的文件中，以便按需加载。

确保您的Vue Router和Webpack配置都正确设置，以使异步组件按预期工作。

逻辑复用：

• 概念：逻辑复用是指将一些通用的业务逻辑、功能或功能性代码封装为可重用的组件、混入或自定义指令，以便在多个组件中共享。
• 应用场景：使用逻辑复用来避免代码重复，提高开发效率，并确保应用程序的一致性。
• 示例代码：示例较为复杂，可根据具体需求编写。

我会继续为其他主题提供概念、场景和示例代码。如果你有任何疑问或需要更多信息，请告诉我。

<!-- 逻辑复用示例 -->
<template>
<div>
<p>{{ greet('John') }}</p>
</div>
</template>

<script>
export default {
setup() {
// 通用逻辑函数
const greet = (name) => {
return Hello, ${name}!;
};
return {
greet,
};
},
};
</script>

组合式函数：

• 概念：组合式函数是一种将功能封装成可组合的函数，以便在多个地方复用。Vue 3 提供了一组内置的组合式函数，如 ref、reactive、computed 等。
• 应用场景：使用组合式函数来处理状态、副作用、计算等通用功能，并将其应用于多个组件。
• 示例代码：

假设您有一个需求：在多个组件中需要计算两个数字的和。您可以创建一个组合式函数来处理此逻辑。

首先，在您的项目中创建一个名为useAddition的组合式函数：

// useAddition.js
import { ref } from 'vue';

// 创建一个可重用的组合式函数，用于计算两个数字的和
export function useAddition() {
  // 定义两个响应式变量，用于存储数字
  const num1 = ref(0);
  const num2 = ref(0);

  // 创建计算和的函数
  function calculateSum() {
    return num1.value + num2.value;
  }

  // 返回响应式变量和计算函数
  return {
    num1,
    num2,
    calculateSum,
  };
}

接下来，您可以在任何需要计算两个数字的和的组件中使用这个组合式函数。

在上面的示例中，我们导入了useAddition组合式函数，并在组件的setup函数中使用它。然后，我们可以在模板中访问num1和num2两个响应式变量，并通过调用calculateSum函数来计算它们的和。

通过这种方式，您可以在多个组件中轻松地共享和重用计算和的逻辑，使代码更加可维护和清晰。这是Vue 3中组合式函数的一个示例，您可以根据自己的需求创建更多的组合式函数来封装逻辑。

自定义指令：

• 概念：自定义指令是一种允许你扩展 Vue 的模板语法的方式，可以用于处理 DOM 元素的行为、样式、事件等。

• 应用场景：使用自定义指令来创建可复用的DOM操作或样式绑定功能，或在特定情况下修改DOM元素的行为。

• 示例代码：

2. 内置组件

Transition

概念：
是 Vue 内置的过渡组件，用于在元素进入或离开 DOM 的时候，在不同状态间切换过渡效果。它通过在元素上添加/删除 CSS 类名来实现过渡效果。

应用场景：

• 切换路由时的页面过渡动画。
• 列表中元素的增删时的过渡效果。

实例代码：

TransitionGroup

概念：
是 Vue 内置的过渡组件，用于在多个元素间切换过渡效果。它通常与 v-for 一起使用，实现列表中元素的增删时的过渡效果。

应用场景：

• 列表中元素的增删时的过渡效果。

实例代码：

KeepAlive

概念：
是 Vue 内置的组件缓存组件，用于保留已经渲染的组件实例，以避免重新渲染。这在路由切换时可以保持组件状态。

应用场景：

• 缓存常用的页面，以减少不必要的重渲染。

实例代码：

Teleport

概念：
是 Vue 内置的传送门组件，用于将组件的内容渲染到指定的 DOM 节点上，而不受当前组件的限制。这可以用于在组件外部渲染弹出框、对话框等内容。

应用场景：

• 创建弹出框或对话框，使其在DOM层级上与组件解耦。

实例代码：

Suspense

概念：
是 Vue 内置的组件，用于处理异步组件加载和渲染时的等待和错误处理。

应用场景：

• 加载异步组件时的loading状态展示。
• 异步组件加载失败时的错误处理。

实例代码：

应用规模化

单文件组件

概念：
单文件组件（SFC）是一种将组件的模板、脚本和样式封装在一个文件中的方式，以便更好地组织和维护组件。

应用场景：

• 组织大型应用中的复杂组件。
• 提高代码的可维护性和可读性。

实例代码：