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 相关文章推荐
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JavaScript中的slice()方法使用详解
Jun 06 Javascript
JavaScript程序设计之JS调试
Dec 09 Javascript
快速掌握Node.js模块封装及使用
Mar 21 Javascript
jQuery 弹出层插件(推荐)
May 24 Javascript
node.js cookie-parser之parser.js
Jun 06 Javascript
JS查找字符串中出现次数最多的字符
Sep 05 Javascript
微信小程序 使用canvas制作K线实例详解
Jan 12 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
Mar 21 Javascript
教你用Cordova打包Vue项目的方法
Oct 17 Javascript
用Object.prototype.toString.call(obj)检测对象类型原因分析
Oct 11 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
Dec 10 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一些服务器端特性的配置加强php的安全
2006/10/09 PHP
如何在PHP中使用Oracle数据库(5)
2006/10/09 PHP
仿Aspnetpager的一个PHP分页类代码 附源码下载
2012/10/08 PHP
php格式化时间戳显示友好的时间实现思路及代码
2014/10/23 PHP
PHP多维数组元素操作类的方法
2016/11/14 PHP
使用jQuery模板来展现json数据的代码
2010/10/22 Javascript
Jquery日历插件制作简单日历
2015/10/28 Javascript
jQuery3.0中的buildFragment私有函数详解
2016/08/16 Javascript
vxe-table vue table 表格组件功能
2019/05/26 Javascript
JavaScript 截取字符串代码实例
2019/09/05 Javascript
VUE单页面切换动画代码(全网最好的切换效果)
2019/10/31 Javascript
es6函数中的作用域实例分析
2020/04/18 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
Vue实现省市区三级联动
2020/12/27 Vue.js
python数据清洗系列之字符串处理详解
2017/02/12 Python
Python的IDEL增加清屏功能实例
2017/06/19 Python
python3+mysql查询数据并通过邮件群发excel附件
2018/02/24 Python
在Python 中实现图片加框和加字的方法
2019/01/26 Python
python爬取基于m3u8协议的ts文件并合并
2019/04/26 Python
pytorch::Dataloader中的迭代器和生成器应用详解
2020/01/03 Python
canvas学习笔记之绘制简单路径
2019/01/28 HTML / CSS
Antonioli美国在线商店:时尚前卫奢华
2019/07/29 全球购物
关于爱情的广播稿
2014/01/16 职场文书
打架检讨书100字
2014/01/19 职场文书
工作决心书
2014/03/11 职场文书
英文自荐信常用句子
2014/03/26 职场文书
党务公开方案
2014/05/06 职场文书
环保建议书200字
2014/05/14 职场文书
投标保密承诺书
2014/05/19 职场文书
2014领导班子正风肃纪思想汇报
2014/09/18 职场文书
学生喝酒检讨书500字
2014/11/02 职场文书
安全员岗位职责
2015/02/10 职场文书
集结号观后感
2015/06/08 职场文书
学习社交礼仪心得体会
2016/01/22 职场文书
我对PyTorch dataloader里的shuffle=True的理解
2021/05/20 Python
使用Mysql计算地址的经纬度距离和实时位置信息
2022/04/29 MySQL