Vue 动态组件与 v-once 指令的实现


Posted in Javascript onFebruary 12, 2019

本文介绍了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指令,可以提高一些静态内容的展示效率

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习ExtJS accordion布局
Oct 08 Javascript
js弹出div并显示遮罩层
Feb 12 Javascript
JS判断客服QQ号在线还是离线状态的方法
Jan 13 Javascript
JavaScript动态添加style节点的方法
Jun 09 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
微信小程序实战之运维小项目
Jan 17 Javascript
JavaScript函数节流和函数防抖之间的区别
Feb 15 Javascript
AngularJS 控制器 controller的详解
Oct 17 Javascript
javascript数组拍平方法总结
Jan 20 Javascript
多个vue子路由文件自动化合并的方法
Sep 03 Javascript
Javascript中的this,bind和that使用实例
Dec 05 Javascript
在微信小程序中保存网络图片
Feb 12 #Javascript
VUE中使用MUI方法
Feb 12 #Javascript
如何利用ES6进行Promise封装总结
Feb 11 #Javascript
在vue项目中引入vue-beauty操作方法
Feb 11 #Javascript
Vue表单控件绑定图文详解
Feb 11 #Javascript
图文讲解vue的v-if使用方法
Feb 11 #Javascript
ES6 如何改变JS内置行为的代理与反射
Feb 11 #Javascript
You might like
php的curl实现get和post的代码
2008/08/23 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
解析php中heredoc的使用方法
2013/06/17 PHP
CI框架中site_url()和base_url()的区别
2015/01/07 PHP
php解决安全问题的方法实例
2019/09/19 PHP
PHP数组实际占用内存大小原理解析
2020/12/11 PHP
innerHTML与jquery里的html()区别介绍
2012/10/12 Javascript
解析jQuery与其它js(Prototype)库兼容共存
2013/07/04 Javascript
JQuery加载图片自适应固定大小的DIV
2013/09/12 Javascript
button没写type=button会导致点击时提交
2014/03/06 Javascript
5个可以帮你理解JavaScript核心闭包和作用域的小例子
2014/10/08 Javascript
javascript常用方法汇总
2014/12/02 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
基于js实现checkbox批量选中操作
2016/11/22 Javascript
jquery删除数组中重复元素
2016/12/05 Javascript
浅析前端路由简介以及vue-router实现原理
2018/06/01 Javascript
深入浅出vue图片路径的实现
2019/09/04 Javascript
JavaScript实现轮播图特效
2020/04/10 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
Python爬虫实战之12306抢票开源
2019/01/24 Python
Python代码一键转Jar包及Java调用Python新姿势
2020/03/10 Python
Python enumerate() 函数如何实现索引功能
2020/06/29 Python
python dict如何定义
2020/09/02 Python
python 密码学示例——理解哈希(Hash)算法
2020/09/21 Python
Python内存泄漏和内存溢出的解决方案
2020/09/26 Python
CSS3 display知识详解
2015/11/25 HTML / CSS
失业者真诚求职信范文
2013/12/25 职场文书
护理专科自荐书范文
2014/02/18 职场文书
车间主任岗位职责
2014/03/16 职场文书
授权收款委托书
2014/09/23 职场文书
群众路线剖析材料怎么写
2014/10/09 职场文书
学习雷锋精神倡议书
2015/04/27 职场文书
2015银行年终工作总结范文
2015/05/26 职场文书
毕业赠语大全
2015/06/23 职场文书
800字作文之大雪
2019/12/04 职场文书
CSS3 实现的图片悬停的切换按钮
2021/04/13 HTML / CSS