<body>
<div id='root'>
<!-- 动态组件:它会根据is里面数据type的变化,自动的加载不同的组件 -->
<component :is="type"></component>
<!-- <child-one v-if="type === 'child-one'"></child-one>
<child-two v-if="type === 'child-two'"></child-two>
-->
<button @click="handleBtnClick">change</button>
</div>
<script>
/*
两个组件频繁的创建和销毁 耗费性能 使用v-once 两个组件被渲染后就放到内存中了
此时再次点击 change 就不需重新创建 组件了 而是从内存中直接取出之前创建的组件即可 这样性能更高一些
*/
Vue.component('child-one',{
template:'<div v-once>child-one</div>'
})
Vue.component('child-two',{
template:'<div v-once>child-two</div>'
})
var vm =new Vue({
el:'#root',
data:{
type:'child-one'
},
methods: {
handleBtnClick:function(){
this.type=(this.type === 'child-one' ?
'child-two':'child-one');
}
},
})
</script>
</body>
点击change:
134
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
