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小数四舍五入多种方法实现
Dec 23 Javascript
页面载入结束自动调用js函数示例
Sep 23 Javascript
jquery判断至少有一个checkbox被选中的方法
Jun 05 Javascript
简单谈谈Javascript中类型的判断
Oct 19 Javascript
js实现仿qq消息的弹出窗效果
Jan 06 Javascript
js改变透明度实现轮播图的算法
Aug 24 Javascript
炫酷的js手风琴效果
Oct 13 Javascript
Ajax和Comet技术总结
Feb 19 Javascript
JS实现闭包中的沙箱模式示例
Sep 07 Javascript
JS实现的全选、全不选及反选功能【案例】
Feb 19 Javascript
优雅的将ElementUI表格变身成树形表格的方法步骤
Apr 11 Javascript
vue+element-ui JYAdmin后台管理系统模板解析
Jul 28 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/28 PHP
php导出csv数据在浏览器中输出提供下载或保存到文件的示例
2014/04/24 PHP
PHP实现创建微信自定义菜单的方法示例
2017/07/14 PHP
PHP基于堆栈实现的高级计算器功能示例
2017/09/15 PHP
PHP使用 Pear 进行安装和卸载包的方法详解
2019/07/08 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
js获取网页高度(详细整理)
2012/12/28 Javascript
Javascript脚本实现静态网页加密实例代码
2013/11/05 Javascript
学习JavaScript设计模式之责任链模式
2016/01/18 Javascript
js获取浏览器高度 窗口高度 元素尺寸 偏移属性的方法
2016/11/21 Javascript
vue.js声明式渲染和条件与循环基础知识
2017/07/31 Javascript
详解vue组件开发脚手架
2018/06/15 Javascript
vue头部导航动态点击处理方法
2018/11/02 Javascript
微信小程序分享小程序码的生成(带参数)以及参数的获取
2020/03/25 Javascript
在Vue中获取自定义属性方法:data-id的实例
2020/09/09 Javascript
Python入门篇之面向对象
2014/10/20 Python
Python实现更改图片尺寸大小的方法(基于Pillow包)
2016/09/19 Python
Python设计模式之中介模式简单示例
2018/01/09 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
Python数据处理篇之Sympy系列(五)---解方程
2019/10/12 Python
Python如何使用字符打印照片
2020/01/03 Python
Python实现迪杰斯特拉算法过程解析
2020/09/18 Python
CSS3中currentColor关键字的妙用
2016/02/27 HTML / CSS
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
一家专门做特卖的网站:唯品会
2016/10/09 全球购物
瑞士香水购物网站:Parfumcity.ch
2017/01/14 全球购物
英国顶级珠宝品牌之家:John Greed
2018/06/09 全球购物
德国电子产品购物网站:TechInTheBasket德国
2018/12/07 全球购物
销售简历自我评价
2014/01/24 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
社会公德演讲稿
2014/05/20 职场文书
航空学院求职信
2014/06/11 职场文书
记账会计岗位职责
2014/06/16 职场文书
机械生产实习心得体会
2016/01/22 职场文书
小学毕业教师寄语
2019/06/21 职场文书
Java获取e.printStackTrace()打印的信息方式
2021/08/07 Java/Android