Vue动态组件异步组件 keep-alive

动态组件指的是动态切换组件的显示与隐藏

每次进行组件间的切换时,Vue都创建了一个新的组件实例,同时存在销毁过程

为了避免过程一每次进行销毁重建的问题,那么可以通过 keep-alive 来处理

<component v-bind:is="currentTabComponent"></component>　　
activated ----- 跟keep-alive配合使用 — 组件激活时调用
deactivated ----- 跟keep-alive配合使用 — 组件停用时调用

<template><div><buttonv-for="item in tabs":key="item"@click="itemClick(item)":class="{active: currentTab === item}">{{item}}</button><!-- 2.动态组件 --><component :is="currentTab"></component></div>
</template><script>
import Home from './pages/Home.vue';
import About from './pages/About.vue';
import Category from './pages/Category.vue';export default {components: {Home,About,Category},data () {return {tabs: ["home", "about", "category"],currentTab: "home"}},methods: {itemClick (item) {this.currentTab = item;}}
}
</script><style scoped>
.active {color: red;
}

大型项目中，通常一个页面中引入了很多组件，为了提升页面的性能（缩短页面渲染时间），可以使用异步组件

异步组件的特点：

Vue 只有在这个组件需要被渲染的时候才会从服务器端请求组件的相关js，且会把结果缓存起来供未来重渲染


components: {List : () => import('./views/List.vue')
}

传统法-非异步组件

import List from './views/List.vue';components: {List
}

import函数按需加，异步加载大组件

FormDemo: () => import('../BaseUse/FormDemo'),、

Keep-alive

缓存组件频繁切换不需要重复渲染性能优化

<template><div><button @click="changeState('A')">A</button><button @click="changeState('B')">B</button><button @click="changeState('C')">C</button><keep-alive> <!-- tab 切换 --><KeepAliveStageA v-if="state === 'A'"/> <!-- v-show --><KeepAliveStageB v-if="state === 'B'"/><KeepAliveStageC v-if="state === 'C'"/></keep-alive></div>
</template><script>
import KeepAliveStageA from './KeepAliveStateA'
import KeepAliveStageB from './KeepAliveStateB'
import KeepAliveStageC from './KeepAliveStateC'export default {components: {KeepAliveStageA,KeepAliveStageB,KeepAliveStageC},data() {return {state: 'A'}},methods: {changeState(state) {this.state = state}}
}
</script>

KeepAliveStageA

<template><p>state A</p>
</template><script>
export default {mounted() {// eslint-disable-next-lineconsole.log('A mounted')},destroyed() {// eslint-disable-next-lineconsole.log('A destroyed')}
}
</script>

Vue动态组件异步组件 keep-alive相关推荐

Vue—核心概念—异步组件和路由懒加载
原文地址:Vue 异步组件&路由懒加载目录异步组件异步组件介绍异步组件声明高级异步组件路由懒加载路由懒加载介绍路由懒加载方法把组件按组分块异步组件异步组件介绍在开发大型 ...
Vue.js 动态组件异步组件
在动态组件上使用 keep-alive 我们之前曾经在一个多标签的界面中使用 is 特性来切换不同的组件: <component v-bind:is="currentTabCompon ...
Vue3动态组件/异步组件
文章目录一.动态组件 1.markRaw 2.keep-alive 二.异步组件 1.使用官方提供的defineAsyncComponent()函数 2.使用插件vueuse 一.动态组件动态切换 ...
vue -- 动态加载组件（tap 栏效果）
在 vue 中,实现 Tab 切换主要有三种方式:使用动态组件,使用 vue-router 路由,使用第三方插件. 因为这次完成的功能只是简单切换组件,再则觉得使用路由切换需要改变地址略微麻烦,所以使 ...
Vue动态加载组件的四种方式
动态加载组件的四种方式: 1.使用import导入组件,可以获取到组件 var name = 'system'; var myComponent =() => import('../compon ...
vue.js 动态加载 html,Vue加载组件、动态加载组件的几种方式
什么是组件: 组件是Vue.js最强大的功能之一.组件可以扩展HTML元素,封装可重用的代码.在较高层面上,组件是自定义的元素,Vue.js的编译器为它添加特殊功能.在有些情况下,组件也可以是原生HT ...
Vue 3 迁移策略笔记—— 第2节：Async Components 异步组件
前言本笔记主要基于官方文档<迁移策略--异步组件>汇总而来.如有理解出入,请以官方文档为主.建议您以官方文档为主,本文为辅.这样您可以"以自己为主"审视的阅读,从而不 ...
Vue学习笔记(八) 组件进阶
1.插槽 (1)插槽内容像 HTML 元素一样,我们常常需要给组件传递内容比如在下面的例子中,我们给自定义组件 prompt-info 传入出错啦的文本 <!DOCTYPE html&g ...
Vue知识点唠嗑之组件
组件是Vue另一大特性,扩展HTML代码.在一个页面上,页面与组件的对应关系往往如下: 1.组件注册 1.1全局组件注册: Vue.component("navbar",{temp ...

Vue动态组件异步组件 keep-alive

大型项目中，通常一个页面中引入了很多组件，为了提升页面的性能（缩短页面渲染时间），可以使用异步组件

异步组件的特点：

Vue动态组件异步组件 keep-alive相关推荐

最新文章

热门文章

Vue动态组件 异步组件 keep-alive

大型项目中，通常一个页面中引入了很多组件，为了提升页面的性能（缩短页面渲染时间），可以使用异步组件

异步组件的特点：

Vue动态组件 异步组件 keep-alive相关推荐

最新文章

热门文章

Vue动态组件异步组件 keep-alive

Vue动态组件异步组件 keep-alive相关推荐