组件化：组件优化

动态组件

<component :is="currentTabComponent"></component>

注意：Vue2 的时候 is 是通过组件名称切换的；在 Vue3 setup 是通过组件实例切换的

使用场景：tab切换

示例：

<template>
  <div>
    <span @click="onChange('1')">A</span>
    <span @click="onChange('2')">B</span>
  </div>
  <component :is="view"></component>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import A from './A.vue'
  import B from './B.vue'

  const obj: { [key: string]: typeof A | typeof B } = {
    '1': A,
    '2': B,
  }

  const type = ref('1')
  const view: A | B = computed(() => obj[type.value])

  const onChange = (val: string) => {
    type.value = val
  }
</script>

A.vue

<template>
  <p>A</p>
</template>

B.vue

<template>
  <p>A</p>
</template>

组件实例放到reactive

<template>
  <div>
    <span @click="onChange('1')">one</span>
    |
    <span @click="onChange('2')">two</span>
  </div>
  <component :is="view"></component>
</template>

<script setup lang="ts">
  import { ref, computed } from 'vue'
  import A from './A.vue'
  import B from './B.vue'

  // 组件实例放到reactive
  const obj: { [key: string]: typeof A | typeof B } = reactive({
    '1': A,
    '2': B,
  })

  const type = ref('1')
  const view = computed(() => obj[type.value])

  const onChange = (val: string) => {
    type.value = val
  }
</script>

如果你把组件实例放到 Reactive 中，Vue会给你一个警告

这是因为 reactive 会进行proxy 代理，而我们组件代理之后毫无用处。

为了节省性能开销，推荐我们使用 shallowRef 或者 markRaw 跳过 proxy 代理。

const obj: { [key: string]: typeof A | typeof B } = reactive({
  '1': markRaw(A),
  '2': markRaw(B),
})

或

const obj = shallowReactive<{ [key: string]: typeof A | typeof B }>({
  '1': A,
  '2': B,
})

或

const obj = shallowRef<{ [key: string]: typeof A | typeof B }>({
  '1': A,
  '2': B,
})

const view = computed(() => obj.value[type.value])

缓存组件

有时候希望组件实例在它们第一次被创建的时候缓存下来，可以使用keep-alive内置组件将组件包裹起来。

缓存全部组件

<keep-alive>
  <router-view />
</keep-alive>

include 只缓存某些组件，其余不缓存

<template>
  <button @click="onChange">切换组件</button>

  <keep-alive :include="['A']">
    <component :is="obj[comp]"></component>
  </keep-alive>
</template>

<script setup lang="ts">
  import A from './A.vue'
  import B from './B.vue'

  const comp = ref('A')
  const obj: { [key: string]: typeof A | typeof B } = {
    A: A,
    B: B,
  }
  
  const onChange = () => {
    comp.value = comp.value === 'A' ? 'B' : 'A'
    console.log('当前keep-alive组件：', comp.value)
  }
</script>

exclude 只排除某些不缓存，其余都缓存

<template>
  <button @click="onChange">切换组件</button>

  <keep-alive :exclude="['A']">
    <component :is="obj[comp]"></component>
  </keep-alive>
</template>

<script setup lang="ts">
  import A from './A.vue'
  import B from './B.vue'

  const comp = ref('A')
  const obj: { [key: string]: typeof A | typeof B } = {
    A: A,
    B: B,
  }
  
  const onChange = () => {
    comp.value = comp.value === 'A' ? 'B' : 'A'
    console.log('当前keep-alive组件：', comp.value)
  }
</script>

max 缓存最大数

超过设定值则去老留新

<template>
  <keep-alive :max="2">
    <component :is="obj[comp]"></component>
  </keep-alive>
</template>

生命周期 activated、deactivated

export default {
  // 被 keep-alive 缓存的组件激活时调用。该钩子在服务器端渲染期间不被调用。
  activated() {},
  // 被 keep-alive 缓存的组件停用时调用。该钩子在服务器端渲染期间不被调用。
  deactivated() {},
};

注意：被 keep-alive 组件的生命周期 onMounted 和 onUnmounted 只会被调用一次。

示例：

<template>
  <button @click="isShow = !isShow">{{ isShow ? '隐藏' : '显示' }}keep-alive</button>
  <button @click="onChange">切换组件</button>

  <keep-alive v-if="isShow">
    <component :is="obj[comp]"></component>
  </keep-alive>
</template>

<script setup lang="ts">
  import A from './A.vue'
  import B from './B.vue'

  const isShow = ref(false)

  const comp = ref('A')
  const obj: { [key: string]: typeof A | typeof B } = {
    A: A,
    B: B,
  }

  const onChange = () => {
    comp.value = comp.value === 'A' ? 'B' : 'A'
    console.log('当前keep-alive组件：', comp.value)
  }
</script>

A.vue

<template>
  <p>A</p>
  <input type="text" v-model="message" />
</template>

<script setup lang="ts">
  const message = ref('')

  onMounted(() => {
    console.log('A 组件 === mounted')
  })
  onActivated(() => {
    console.log('A 组件 === onActivated')
  })
  onDeactivated(() => {
    console.log('A 组件 === onDeactivated')
  })
  onUnmounted(() => {
    console.log('A 组件 === onUnmounted')
  })
</script>

B.vue

<template>
  <p>B</p>
  <input type="text" v-model="message" />
</template>

<script setup lang="ts">
  const message = ref('')
</script>

异步组件

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue'
  const Banner = defineAsyncComponent(() => import('./components/Banner.vue'))
</script>

加载与错误状态

异步操作不可避免地会涉及到加载和错误状态：

const AsyncComp = defineAsyncComponent({
  // 加载函数
  loader: () => import('./components/Banner.vue'),

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

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

如果提供了一个加载组件，它将在内部组件加载时先行显示。在加载组件显示之前有一个默认的 200ms 延迟——这是因为在网络状况较好时，加载完成得很快，加载组件和最终组件之间的替换太快可能产生闪烁，反而影响用户感受。

如果提供了一个报错组件，则它会在加载器函数返回的 Promise 抛错时被渲染。你还可以指定一个超时时间，在请求耗时超过指定时间时也会渲染报错组件。

结合 Suspense 内置组件 （Vue3 新增）

使用场景：骨架屏

优点：

• 实现异步加载组件
• 实现 build 组件分包，常用于首屏加载。如果使用同步会导致 build 出来的包大，使用 异步组件 可以将包分割出来

<template>
	<Suspense>
    <template #default>
      <Banner></Banner>
		</template>
    <template #fallback>
			<LoadingComponent></LoadingComponent>
		</template>
  </Suspense>
</template>

<script setup lang="ts">
  import { defineAsyncComponent } from 'vue'
  import LoadingComponent from './components/LoadingComponent.vue'
  
  const Banner = defineAsyncComponent(() => import('./components/Banner.vue'))
</script>