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下数值型比较难点说明
Jun 07 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
Sep 10 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
Sep 27 Javascript
xmlhttp缓存清除的2种解决方法
Dec 13 Javascript
JS、jquery实现几分钟前、几小时前、几天前等时间差显示效果的代码实例分享
Apr 11 Javascript
javascript实现炫酷的拖动分页
May 11 Javascript
jQuery切换所有复选框选中状态的方法
Jul 02 Javascript
js实现简单的验证码
Dec 25 Javascript
AngularJS中控制器函数的定义与使用方法示例
Oct 10 Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 Javascript
vue+elementui实现点击table中的单元格触发事件--弹框
Jul 18 Javascript
解决vue项目input输入框双向绑定数据不实时生效问题
Aug 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开源建站平台小结
2010/04/22 PHP
php echo 输出字符串函数详解
2010/05/13 PHP
PHP学习笔记 (1) 环境配置与代码调试
2011/06/19 PHP
PHP实现手机归属地查询API接口实现代码
2012/08/27 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
typecho插件编写教程(三):保存配置
2015/05/28 PHP
YII中Ueditor富文本编辑器文件和图片上传的配置图文教程
2017/03/15 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
php实现推荐功能的简单实例
2019/09/29 PHP
Nigma vs Liquid BO3 第一场2.14
2021/03/10 DOTA
Web Uploader文件上传插件使用详解
2016/05/10 Javascript
jQuery插件uploadify实现ajax效果的图片上传
2016/06/18 Javascript
Kindeditor单独调用单图上传增加预览功能的实例
2017/07/31 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
Vue项目总结之webpack常规打包优化方案
2019/06/06 Javascript
vue 开发之路由配置方法详解
2019/12/02 Javascript
JavaScript修改注册表实例代码
2020/01/05 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
Node.js API详解之 string_decoder用法实例分析
2020/04/29 Javascript
[44:40]KG vs LGD 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
python 不关闭控制台的实现方法
2011/10/23 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python嵌套列表转一维的方法(压平嵌套列表)
2018/07/03 Python
django如何通过类视图使用装饰器
2019/07/24 Python
Python的in,is和id函数代码实例
2020/04/18 Python
饿了么订餐官网:外卖、网上订餐
2019/06/28 全球购物
Delphi工程师笔试题
2013/09/21 面试题
教师自我评价范文
2013/12/16 职场文书
甜点店创业计划书
2014/01/27 职场文书
大班上学期幼儿评语
2014/04/30 职场文书
中学生运动会口号
2014/06/07 职场文书
婚礼伴郎致辞
2015/07/28 职场文书
Nginx服务器添加Systemd自定义服务过程解析
2021/03/31 Servers
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python
浅谈redis缓存在项目中的使用
2021/05/20 Redis
MySQL选择合适的备份策略和备份工具
2022/06/01 MySQL