Dynamic component
Component usage
<component v-bind:is=""></component>、
The is attribute receiving parameters are:
- The name of the registered component
- Option object of a component
The component tag can be used as the mount point of the component, and we can isdynamically switch the displayed component by modifying the value of the attribute, such as implementing a tab type function.
Cache dynamic components
If you need to cache the switched components, you can use keep-alive to wrap the component tag
<!-- 失活的组件将会被缓存！-->
<keep-alive>
<component v-bind:is="currentTabComponent"></component>
</keep-alive>
Asynchronous component
Official website description:
When developing a large project, we will divide the large project into small pieces of code according to the components, and then load the code blocks asynchronously, so that some code blocks on the first screen can be loaded first, speeding up the rendering speed of the first screen, and other code blocks when needed Reload, the loaded code block will be cached for reuse and re-rendering.
For example: some components will not be loaded when entering the first screen for the first time, but will only be loaded when certain operations are performed, so at this time, we can set the component to be loaded asynchronously, when to use it, and what Load it in at some time to achieve the purpose of improving the performance of the first screen.
How to use asynchronous components:
components: {
组件name: () => import ('组件url');
}
It's a bit like lazy loading of routing.
If you don't use an asynchronous component, it will be loaded first, regardless of whether you have an operation or not, which will cost performance.
Such as: writing a component, when the button is clicked, the component is loaded and displayed, when it is set to be loaded asynchronously.
<template>
<div class="home">
<A v-if="show"></A>
<B v-if="show"></B>
<button @click="show=!show">切换</button>
</div>
</template>
<script>
export default {
components:{
A:()=>import ('../components/a'), //A组件内容，我是异步加载的A组件
B:()=>import ('../components/b') //B组件内容，我是异步加载的B组件
},
data () {
return {
show:false
}
},
mounted () {
},
methods: {
},
}
</script>
You can experiment in the network and use ctrl+f to find the text in the component;
you will find that when the component does not appear, the content cannot be found;
when we click the button
The component appears, one more js file is loaded in the network, and the content in the A and B components can be searched.
And multiple switching will not reload.
Better performance!
Advanced asynchronous components:
const asyncComponent = () => ({
component: './my-async-component',
delay: 200, // 延迟加载，默认200毫秒
error: errorComponent, // 加载失败显示组件
loading: loadingComponent, // 加载时使用组件
timeout: 2000 // 超时时间，默认 Infinity
})