动态组件

在动态组件上使用 keep-alive

在线示例

当在这些组件之间切换的时候，你有时会想保持这些组件的状态，以避免反复重渲染导致的性能问题。
例如我们来展开说一说这个多标签界面：

你会注意到，如果你选择了一篇文章，切换到 Archive 标签，然后再切换回 Posts，会继续展示你之前选择的文章的。
这就是<keep-alive>的功劳，它可以在组件切换的时候缓存当前组件的状态，等到再次进入这个组件不需要重新创建组件，使得性能提升。

<!-- 失活的组件将会被缓存！-->
<keep-alive><component v-bind:is="currentTabComponent"></component>
</keep-alive>

异步组件

在线示例
ps: 示例佐证有点牵强，待后续深入了解后再更新。

可参考这篇文章自行验证 vue异步组件(高级异步组件)使用场景及实践

在大型应用中，我们可能需要将应用分割成小一些的代码块，并且只在需要的时候才从服务器加载一个模块。为了简化，Vue 允许你以一个工厂函数的方式定义你的组件，这个工厂函数会异步解析你的组件定义。Vue 只有在这个组件需要被渲染的时候才会触发该工厂函数，且会把结果缓存起来供未来重渲染。

你也可以在工厂函数中返回一个 Promise，所以把 webpack 2 和 ES2015 语法加在一起，我们可以这样使用动态导入：

Vue.component('AsyncComponent1',// 这个动态导入会返回一个 `Promise` 对象。() => import('./async-component1')
)

完整示例如下：

<template><div>异步组件测试，同步组件总是先load, 而异步组件在加载完成。<SyncComponent1 /><AsyncComponent2 /><SyncComponent2 /></div>
</template><script>
import Vue from "vue";
import SyncComponent2 from "./sync-component2";
import SyncComponent1 from "./sync-component1";const AsyncComponent2 = Vue.component("AsyncComponent2",// 这个动态导入会返回一个 `Promise` 对象。() => import("./async-component2")
);export default {name: "DynamicComponentDemo",components: {SyncComponent1,AsyncComponent2,SyncComponent2,},data() {return {};},methods: {},
};
</script><style scoped>
</style>

我们故意调整了组件的顺序，但是通过控制台我们看到日志输出顺序总是同步组件先加载完成。

– end –

vue2基础 - vue2 动态组件和异步组件使用相关推荐

vue 根据组件地址动态加载异步组件
要求:根据列表中配置的组件地址,动态加载组件(webpart) vue 根据组件地址动态加载异步组件目录结构 index.html components/component1 components/ ...
Vue2基础-Vue2.x 多层级组件数据通信 EventBus 和 Vuex
多层级组件间通信如果我们使用vue提供的prop和emit实现会很麻烦,需要层层嵌套.下面介绍的两种方式可以解决该问题. EventBus EventBus的使用也很简单. 我们先定义个EventB ...
Vue2基础-Vue2.x 父子组件数据通信 Prop 和 Event
父子组件间通信 vue 提供了prop实现父组件向子组件传递数据,提供emit实现子组件向父组件回传数据. 组件参数传递 prop [组件创建使用示例] 在该示例的HelloWorld组件中我们接收了 ...
suspense组件和异步组件
等待异步组件时渲染一些额外内容,让应用有更好的用户体验使用步骤: 异步引入组件,使用defineAsyncComponent定义异步组件 import {defineAsyncComponent} ...
vue 如何处理两个组件异步问题_Vue动态异步组件实现思路及其问题
前言:在vue 官方资料中,我们可以可以很学会如何通过vue构建"动态组件"以及"异步组件",然而,在官方资料中,并没有涉及到真正的"动态异步&quo ...
Vue3动态组件/异步组件
文章目录一.动态组件 1.markRaw 2.keep-alive 二.异步组件 1.使用官方提供的defineAsyncComponent()函数 2.使用插件vueuse 一.动态组件动态切换 ...
Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
vue3 + vite + ts + setup , 第四练异步组件的使用，defineAsyncComponent和Suspense的使用
在大型项目中,我们可能需要拆分应用为更小的块,并仅在需要时再从服务器加载相关组件.这样做的目的可以提高页面加载速度,优化用户体验,减少首屏白屏时间 defineAsyncComponent 方法接收一 ...
Vue2基础、组件化编程、脚手架、Vuex、Vue路由、UI组件库
尚硅谷张天禹老师讲课学习视频 1.Vue简介 Vue2中文官网 1.1 Vue 介绍一套用于构建用户界面的渐进式JavaScript框架构建用户界面:把数据通过某种办法变成用户界面渐进式:可以 ...

vue2基础 - vue2 动态组件和异步组件使用

动态组件

在动态组件上使用 keep-alive

异步组件

vue2基础 - vue2 动态组件和异步组件使用相关推荐

最新文章

热门文章