vue.js高级组件

vue.js高级组件

一.动态组件

<template>
  <div>
    <button @click="changeComponent('ComponentA')">加载组件A</button>
    <button @click="changeComponent('ComponentB')">加载组件B</button>

    <component :is="currentComponent"></component>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue'
import ComponentB from './ComponentB.vue'

export default {
  data() {
    return {
      currentComponent: null
    }
  },
  methods: {
    changeComponent(component) {
      switch (component) {
        case 'ComponentA':
          this.currentComponent = ComponentA
          break
        case 'ComponentB':
          this.currentComponent = ComponentB
          break
        default:
          this.currentComponent = null
      }
    }
  }
}
</script>

元素的:is属性绑定到了currentComponent变量。当currentComponent变量的值改变时，元素会动态地渲染相应的组件。

在methods中的changeComponent方法中，根据传入的组件名称，切换currentComponent变量的值，从而决定要渲染的实际组件。

请注意，在示例中，ComponentA和ComponentB是通过import语句导入的实际组件文件，您需要根据您的项目结构和组件文件路径进行相应的调整。

二.缓存组件

在Vue 3中，可以使用 keep-alive标签 组件来缓存组件的状态，以便在组件被切换时保留其状态和数据。

<template>
    <button @click="fn('Box1')">bt1</button>
    <button @click="fn('Box2')">bt2</button>
    <button @click="fn('Box3')">bt3</button>
    <KeepAlive include="Box3">
        <component :is="x"></component>
    </KeepAlive>
</template>

<script >
import Box1 from './components/Box1.vue'
import Box2 from './components/Box2.vue'
import Box3 from './components/Box3.vue'
export default {
    data() {
        return {
            x: Box1,
        }
    },
    methods: {
        fn(tag) {
            this.x = tag;
        }
    },
    components: {
        Box1,
        Box2,
        Box3,
    }
}
</script>

<style></style>

组件在Vue 3中有以下属性可用：

1.include：用于指定要缓存的组件名称，可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组
2.exclude：用于指定不需要缓存的组件名称，可以是一个以英文逗号分隔的字符串、一个正则表达式，或是包含这两种类型的一个数组。匹配到的组件不会被缓存。
3.max：用于指定缓存的最大组件实例数量。超过该数量后，最早未使用的组件实例将被销毁。默认值为 infinite（无限制）。
include 和 exclude 属性可以同时使用，但 exclude 的优先级较高。

以上的属性的变量会根据组件的 name 选项进行匹配，所以组件如果想要条件性地被 KeepAlive 缓存，就必须显式声明一个 name 选项。

3.异步组件

在Vue 3中，可以使用异步组件来延迟加载组件的代码，以提高应用程序的性能。Vue 3中的异步组件可以使用 defineAsyncComponent 函数来定义。

<template>
	<div>
		<button @click="fn('Box')">box</button>
		<button @click="fn('Box2')">box2</button>
		<button @click="fn('Box3')">box3</button>
		<component :is="x"></component>
	</div>
</template>


<script>
import {
	defineAsyncComponent
} from "vue"
import Loading from "./Loading.vue"
import ErrorComponent from "./ErrorComponent.vue"

export default {
	data() {
		return {
			x: "Box4"
		}
	},
	methods: {
		fn(arg) {
			this.x = arg
		}
	},
	components: {
		Box: defineAsyncComponent(() => import("./Box.vue")),
		Box2: defineAsyncComponent(() => import("./Box2.vue")),
		Box3: defineAsyncComponent(() => import("./Box3.vue")),
		Box4: defineAsyncComponent({
			// 加载函数
			loader: () => import('./Box4.vue'),

			// 加载异步组件时使用的组件
			loadingComponent: Loading,
			// 展示加载组件前的延迟时间，默认为 200ms
			delay: 200,

			// 加载失败后展示的组件
			errorComponent: ErrorComponent,
			// 如果提供了一个 timeout 时间限制，并超时了
			// 也会显示这里配置的报错组件，默认值是：Infinity
			timeout: 3000
		})
	}
}
</script>

<style></style>

需要注意的是，在Vue 3中，异步组件默认会采用ES模块的导入方式，所以需要使用 import() 来实现动态导入。同时，异步组件的导入是基于浏览器原生的 import() 函数，因此需要在构建工具中进行相应的配置。
异步组件功能优点。
它具有以下的好处和使用场景：

1.节省初始加载时间：异步组件允许将组件的加载延迟到真正需要使用该组件时再进行加载。这样可以减少初始加载时间，提升页面的加载速度。

2.优化页面性能：通过将某些组件延迟加载，可以减少初始页面的资源消耗，提升页面的性能。特别是对于复杂的大型应用程序，延迟加载一些不常用的组件可以减轻页面的负担，提高整体的性能。

3.按需加载：异步组件可以根据需要动态加载，可以根据用户的操作或者页面逻辑来决定何时加载组件。这样可以实现按需加载，减少不必要的资源浪费。

4.模块化代码管理：通过使用异步组件，可以将应用程序的代码拆分成多个小模块，每个模块对应一个异步组件。这样有助于代码的模块化管理，提高代码的可维护性和可复用性。