이 기사는 Vue 동적 구성 요소와 비동기 구성 요소에 대한 설명(코드 예제)을 제공합니다. 이는 특정 참고 가치가 있으므로 도움이 될 수 있습니다.
동적 구성 요소
탭 페이지와 같이 다양한 상태에 따라 한 곳에서 다양한 구성 요소를 참조하려는 경우 Vue는 동적 구성 요소를 제공합니다.
기본 사용
Parent.vue
<template>
<div>
<el-button-group>
<el-button>{{btn.name}}
</el-button>
</el-button-group>
<div>
<component></component>
</div>
</div>
</template>
<script>
import Childs1 from './Childs1'
import Childs2 from './Childs2'
import Childs3 from './Childs3'
import Childs4 from './Childs4'
export default {
name:'Parent',
components:{
Childs1,
Childs2,
Childs3,
Childs4
},
data() {
return {
btnGroup: [
{name: 'Childs1', disabled: true},
{name: 'Childs2', disabled: false},
{name: 'Childs3', disabled: false},
{name: 'Childs4', disabled: false},
],
currentCom:'Childs1'
}
},
methods: {
change(index){
let pre = Number(this.currentCom[this.currentCom.length -1]);
this.btnGroup[pre -1].disabled = false;
this.btnGroup[index].disabled = true;
this.currentCom = 'Childs' + (index + 1);
}
}
}
</script>
<style>
.active{
background-color: red;
}
</style>
실행 결과는 다음과 같습니다.
다른 버튼을 클릭하면 아래의 다른 구성 요소가 전환됩니다. 동적 구성요소의 로딩을 구현합니다. is 값은 등록된 구성요소의 이름이거나 구성요소 선택일 수 있습니다. 버튼을 클릭하면 버튼의 disabled가 true입니다. 그런 다음 버튼에 active CSS 클래스를 제공하고 를 변경합니다. currentCom의 값is 的值可以是一个已经注册的组件的名字或者一个组件的选对象。当我们点击按钮时，这个按钮的 disabled 为 true 然后我们将给这个按钮一个active 的css类,同时改变 currentCom 的值
keep-alive:动态组件的缓存
如果我们需要频繁的切换页面，每次都是在组件的创建和销毁的状态间切换，这无疑增大了性能的开销。那么我们要怎么优化呢？ Vue提供了动态组件的 缓存。keep-alive 会在切换组件的时候缓存当前组件的状态，等到再次进入这个组件，不需要重新创建组件，只需要从前面的缓存中读取并渲染。
Parent.vue(其余地方代码和上面一样)
<template>
<div>
<el-button-group>
<el-button>
{{btn.name}}
</el-button>
</el-button-group>
<div>
<keep-alive>
<component></component>
</keep-alive>
</div>
</div>
</template>
<style>
.btn-group{
position:fixed;
}
.active{
background-color: red;
}
</style>
Childs1.vue
<template>
<div>
{{title}}
<button>点我+1</button>
</div>
</template>
<script>
export default {
name:'Childs1',
data(){
return{
title: 1
}
},
methods:{
change(){
this.title += 1;
}
},
mounted(){
console.log('child1 mounted');
}
}
</script>
Childs2.vue
<template>
<div>
Childs2
</div>
</template>
<script>
export default {
name:'Childs2',
mounted(){
console.log('child2 mounted');
}
}
</script>
运行结果如下图：
对比：如果我们将
前一组图片在切换组件的时候，title从1加到3，然后等下次再切换回来的时候,title还是停留在3，从控制台可以看出，Childs1.vue这个组件的mounted的钩子函数只有一次。后一组图片，title一开始加到3，下一次进入这个组件的时候title又从1开始，控制台图片也显示这个组件经历个了多次钩子函数，说明组件是销毁重建的。
tips:因为缓存的组件只需要建立一次，所以如果我们要在每次进入组件的钩子函数里面做相应的操作的时候，会出现问题，所以请明确我们使用的场景，避免出现bug
异步组件异步组件存在的意义在于加载一个体量很大的页面时，如果我们不设置加载的优先级的话，那么可能页面在加载视频等信息的时候会非常占用时间，然后主要信息就会阻塞在后面在加载。这对用户来说无疑不是一个很差的体验。但是如果我们设置加载的顺序，那么我们可以优先那些最重要的信息优先显示，优化了整个项目。一般来说我们是将加载组件和 路由 （vue-router
Vue는 동적 구성요소의 캐싱을 제공합니다. keep-alive는 구성요소를 전환할 때 현재 구성요소의 상태를 캐시합니다. 이 구성요소를 다시 입력할 때 구성요소를 다시 생성할 필요는 없습니다. 이전 캐시에서 읽고 렌더링하기만 하면 됩니다. 🎜🎜🎜Parent.vue (나머지 코드는 위와 동일)🎜🎜rrreee🎜🎜Childs1.vue🎜🎜rrreee🎜🎜Childs2.vue🎜🎜rrreee🎜실행 결과는 아래와 같습니다. 🎜
🎜🎜🎜🎜🎜 비교 : < ;keep -alive> 가 제거되면 실행 결과는 다음과 같습니다:🎜🎜🎜
title은 여전히 3으로 유지됩니다. 콘솔에서 볼 수 있듯이 Childs1.vue code> 구성 요소가 <code>마운트되었습니다. 후크 기능은 한 번만 존재합니다. 후자의 그림 그룹에서는 처음에는 title이 3으로 증가하고 다음에 이 구성 요소를 입력하면 title이 다시 1부터 시작됩니다. 콘솔 그림에서도 이를 알 수 있습니다. 구성 요소가 많은 작업을 거쳤으며 이는 구성 요소가 삭제되고 다시 작성되었음을 나타냅니다. 🎜 🎜🎜팁: 캐시된 컴포넌트는 한 번만 생성하면 되기 때문에 해당 컴포넌트의 Hook 함수에 들어갈 때마다 해당 작업을 수행해야 한다면 문제가 발생하므로 주의하시기 바랍니다. 우리가 사용하는 시나리오를 명확히 하고 버그를 방지하세요🎜비동기 구성 요소비동기 구성 요소는 페이지를 로드할 때, 로딩 우선순위를 설정하지 않으면 동영상 등 정보 로딩 시 페이지에서 많은 시간이 걸릴 수 있으며, 나중에 주요 정보 로딩이 차단됩니다. 이는 확실히 사용자에게 나쁜 경험이 아닙니다. 하지만 로딩 순서를 설정하면 가장 중요한 정보를 먼저 표시하여 우선순위를 지정하여 전체 프로젝트를 최적화할 수 있습니다. 일반적으로 우리는 routing(vue-router)과 함께 로딩 컴포넌트를 사용하므로 여기서는 자세한 내용을 다루지 않겠습니다. 공식을 참조하세요. 웹사이트. 🎜위 내용은 Vue 동적 구성 요소 및 비동기 구성 요소에 대한 설명(코드 예제)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!