Vue:defineAsyncComponent(异步组件)、component(动态组件)、keep-alive(缓存组件)

异步组件:defineAsyncComponent

Vue3 的 defineAsyncComponent 特性可以让我们延迟加载组件。因为在默认情况下,在构建项目或运行项目时,会将所有所需要的打包成一个整体,vue为单页面应用,同步加载大量的页面代码会导致页面长时间处于空白情况,所以

这是一个改善初始页面加载的好方法,因为该方法会将以较小的块加载,而不必在页面加载时加载每个组件。

来自官网可查看示例:异步组件

javascript 复制代码
import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() => {
  return new Promise((resolve, reject) => {
    // ...load component from server
    resolve(/* loaded component */)
  })
})
// ... use `AsyncComp` like a normal component

使用 import 引入 所需组件

javascript 复制代码
// 使用
<AsyncComp ></AsyncComp >

import { defineAsyncComponent } from 'vue'

const AsyncComp = defineAsyncComponent(() =>
  import('./components/MyComponent.vue')
)

defineAsyncComponent 可配置参数:

javascript 复制代码
const AsyncComp = defineAsyncComponent({
  // the loader function
  loader: () => import('./Foo.vue'),

  // A component to use while the async component is loading
  loadingComponent: LoadingComponent,
  // Delay before showing the loading component. Default: 200ms.
  delay: 200,

  // A component to use if the load fails
  errorComponent: ErrorComponent,
  // The error component will be displayed if a timeout is
  // provided and exceeded. Default: Infinity.
  timeout: 3000
})

动态组件:component

可以根据条件动态选择要渲染的组件。通过使用动态组件,可以基于不同的状态条件来切换不同的组件,从而实现更灵活的组件复用和组合

使用情景:有的时候,在页面中需要在不同组件之间进行动态切换,这时候除了条件渲染,还可以使用动态组件来实现

注意:

  • is 属性的值必须是以字符串形式指定的已注册组件的名称。
  • :is 则会将表达式的值作为字符串解析,从而动态地渲染相应的组件。
  • vue3 setup 语法糖跟vue2区别 引入不能直接赋值给:is 必须定义
javascript 复制代码
<!-- 父组件 -->
<template>
<div class=''>
  <component :is="childOneCom"></component>
</div>
</template>

<script setup>
import childOne from "./childOne.vue";

const childOneCom = ref(childOne);

</script>
<style lang='scss' scoped>
</style>

缓存组件:keep-alive

keep-alive 包裹的组件(component)在被隐藏后,并不会将组件销毁,而是将其缓存起来,下次再次使用时会从缓存中取出复用的过程。 只执行了(创建前后、挂载前后),没有执行销毁函数,当再次切回时,不执行创建前后、挂载前后的生命周期函数了,而是只执行了父组件的更新前后函数执行

参数:

  • include:匹配的路由/组件被缓存
  • exclude:匹配的路由/组件不被缓存
  • max:最大缓存数

include/exclude:使用逗号分割、正则形式,必须采用v-bind形式、数组形式,必须采用v-bind形式

匹配规则:

  • 首先匹配组件的name选项
  • 如果name选项不可用,则匹配它的局部注册名称(父组件components选项的键值)
  • 匿名组件,不可匹配(路由组件没有name选项,并且没有注册的组件名)
  • 只能匹配当前被包裹的组件,不能匹配更下面嵌套的子组件=>例如:只能匹配路由组件的name选项,不能匹配路由组件里面的嵌套组件name选项
  • 不会在函数式组件中正常工作,因为他们没有缓存实例
  • exclude的优先级>include
javascript 复制代码
  <!-- 逗号分隔字符串 -->
    <keep-alive include="one,two">
      <component :is="three"></component>
    </keep-alive>
    
    <!-- 正则表达式 (使用 v-bind) -->
    <keep-alive :include="/one|two/">
      <component :is="three"></component>
    </keep-alive>
    
    <!-- 数组形式 (使用 v-bind) -->
    <keep-alive :include="['one', 'two']">
      <component :is="three"></component>
    </keep-alive>
    
    <!--- 缓存路由 -->
    <keep-alive include='two'>
        <router-view></router-view>
    </keep-alive>

vue2.x vue3.x 区别

javascript 复制代码
在App.vue中
<!-- vue2.x配置 -->
<template>
   <keep-alive>
    <router-view v-if="$route.meta.keepAlive" />
  </keep-alive>
  <router-view v-if="!$route.meta.keepAlive"/>
</template>


<!-- vue3.0配置 -->
<template>
  <router-view v-slot="{ Component }">
    <keep-alive>
      <component :is="Component"  v-if="$route.meta.keepAlive"/>
    </keep-alive>
    <component :is="Component"  v-if="!$route.meta.keepAlive"/>
  </router-view> 
</template>

vue3.x 中使用name属性

  • 插件vite-plugin-vue-setup-extend

javascript 复制代码
<script>
  export default {
    name: 'xxx',
  }
</script>

<script setup>
  
</script>
javascript 复制代码
<script>
  export default {
    name: 'xxx',
    setup(){
		return {}
	},
  }
</script>
javascript 复制代码
import { defineComponent } from 'vue';
defineOptions({
  name: 'xxx',
})

总结:

可根据实际情况 结合、拆分使用

相关推荐
腾讯TNTWeb前端团队15 分钟前
helux v5 发布了,像pinia一样优雅地管理你的react状态吧
前端·javascript·react.js
范文杰4 小时前
AI 时代如何更高效开发前端组件?21st.dev 给了一种答案
前端·ai编程
拉不动的猪4 小时前
刷刷题50(常见的js数据通信与渲染问题)
前端·javascript·面试
拉不动的猪4 小时前
JS多线程Webworks中的几种实战场景演示
前端·javascript·面试
FreeCultureBoy5 小时前
macOS 命令行 原生挂载 webdav 方法
前端
uhakadotcom5 小时前
Astro 框架:快速构建内容驱动型网站的利器
前端·javascript·面试
uhakadotcom5 小时前
了解Nest.js和Next.js:如何选择合适的框架
前端·javascript·面试
uhakadotcom5 小时前
React与Next.js:基础知识及应用场景
前端·面试·github
uhakadotcom5 小时前
Remix 框架:性能与易用性的完美结合
前端·javascript·面试
uhakadotcom6 小时前
Node.js 包管理器:npm vs pnpm
前端·javascript·面试