时间:2021-05-26
本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下:
<div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button></div>Vue.component('child-one', { template: `<div>child-one</div>`,})Vue.component('child-two', { template: `<div>child-two</div>`,})let vm = new Vue({ el: '#root'})上面代码需实现,当点击按钮时,child-one和child-two实现toggle效果,该怎么实现呢?
<div id="root"> <child-one v-if="type === 'child-one'"></child-one> <child-two v-if="type === 'child-two'"></child-two> <button @click="handleBtnClick">change</button></div>Vue.component('child-one', { template: `<div>child-one</div>`,})Vue.component('child-two', { template: `<div>child-two</div>`,})let vm = new Vue({ el: '#root', data: { type:'child-one' }, methods: { handleBtnClick(){ this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } }})通过上面handleBtnClick函数的实现,配合v-if指令就能实现toggle效果
动态组件
下面这段代码实现的效果和上面是一样的。
<div id="root"> <component :is="type"></component> //is内容的变化,会自动的加载不同的组件 <button @click="handleBtnClick">change</button></div>Vue.component('child-one', { template: `<div>child-one</div>`,})Vue.component('child-two', { template: `<div>child-two</div>`,})let vm = new Vue({ el: '#root', data: { type:'child-one' }, methods: { handleBtnClick(){ this.type = this.type === 'child-one' ? 'child-two' : 'child-one' } }})动态组件的意思是它会根据is里面数据的变化,会自动的加载不同的组件
v-noce指令
每次点击按钮切换的时候,Vue 底层会帮我们干什么呢?Vue 底层会判断这个child-one组件现在不用了,取而代之要用child-two组件,然后它就会把child-one组件销毁掉,在创建一个child-two组件。假设这时child-two组件要隐藏,child-one组件要显示,这个时候要把刚刚创建的child-two销毁掉,在重新创建child-one组件,也就是每一次切换的时候,底层都是要销毁一个组件,在创建一个组件,这种操作会消耗一定的性能。如果我们的组件的内容,每次都是一样的可以在上面加一个v-once,看下面代码。
Vue.component('child-one', { template: `<div v-once>child-one</div>`,})Vue.component('child-two', { template: `<div v-once>child-two</div>`,})加上v-once指令之后,有什么好处呢?当chlid-one组件第一次被渲染时,因为组件上面有一个v-once指令,所以它直接就放到内存里了,当切换的时候child-two组件第一次被渲染时,它也会被放到内存里,再次点击切换时,这时并不需要再重新创建一个child-one组件了,而是从内存里直接拿出以前的child-one组件,它的性能会更高一些。
所以在 Vue 当中,通过v-once指令,可以提高一些静态内容的展示效率
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了vue动态组件和v-once指令。分享给大家供大家参考,具体如下:点击按钮时,自动切换两个组件,当点击按钮之后,会自动清除原来的组件,显示新的组件
今天我们来给大家介绍下在Vue开发中我们经常会碰到的一种需求场景,就是在form中我们需要动态的增加组件模块,效果如下:这种效果实现其实就是对v-for指令的一
1.Vue指令 Vue提供自定义实现指令的功能,和组件类似,可以是全局指令和局部指令,详细可以参见vue官网自定义指令一节(https://cn.vuejs.
除了默认设置的核心指令(v-model和v-show),Vue也允许注册自定义指令。在Vue里,代码复用的主要形式和抽象是组件。然而,有的情况下,仍然需要对
Vue中的组件和指令分为局部组件、局部指令和全局组件、全局指令。对于注册有一定数量的全局指令和全局组件时,官方文档中的方法就显得有些不够清爽了。全局组件在Vue