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',
})

总结:

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

相关推荐
前端拾光者16 分钟前
利用D3.js实现数据可视化的简单示例
开发语言·javascript·信息可视化
Json_1817901448034 分钟前
电商拍立淘按图搜索API接口系列,文档说明参考
前端·数据库
风尚云网1 小时前
风尚云网前端学习:一个简易前端新手友好的HTML5页面布局与样式设计
前端·css·学习·html·html5·风尚云网
木子02041 小时前
前端VUE项目启动方式
前端·javascript·vue.js
GISer_Jing1 小时前
React核心功能详解(一)
前端·react.js·前端框架
捂月1 小时前
Spring Boot 深度解析:快速构建高效、现代化的 Web 应用程序
前端·spring boot·后端
深度混淆1 小时前
实用功能,觊觎(Edge)浏览器的内置截(长)图功能
前端·edge
Smartdaili China1 小时前
如何在 Microsoft Edge 中设置代理: 快速而简单的方法
前端·爬虫·安全·microsoft·edge·社交·动态住宅代理
秦老师Q1 小时前
「Chromeg谷歌浏览器/Edge浏览器」篡改猴Tempermongkey插件的安装与使用
前端·chrome·edge
滴水可藏海1 小时前
Chrome离线安装包下载
前端·chrome