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 相关文章推荐
document.documentElement &amp;&amp; document.documentElement.scrollTop
Dec 01 Javascript
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
原生Js实现按的数据源均分时间点幻灯片效果(已封装)
Dec 28 Javascript
JavaScript基础函数整理汇总
Jan 30 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
JQuery Ajax跨域调用和非跨域调用问题实例分析
Apr 16 jQuery
vue使用微信JS-SDK实现分享功能
Aug 23 Javascript
Vue如何提升首屏加载速度实例解析
Jun 25 Javascript
JavaScript Html实现移动端红包雨功能页面
Jan 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下几种删除目录的方法总结
2007/08/19 PHP
通俗易懂的php防注入代码
2010/04/07 PHP
PHP使用递归生成文章树
2015/04/21 PHP
php中ob函数缓冲机制深入理解
2015/08/03 PHP
Yii控制器中操作视图js的方法
2016/07/04 PHP
Jquery时间验证和转换工具小例子
2013/07/01 Javascript
JS 毫秒转时间示例代码
2013/09/22 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
Jsonp post 跨域方案
2015/07/06 Javascript
jQuery+Pdo编写login登陆界面
2016/08/01 Javascript
AngularJS 中的Promise --- $q服务详解
2016/09/14 Javascript
Vue实例中生命周期created和mounted的区别详解
2017/08/25 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
解决Angular2 router.navigate刷新页面的问题
2018/08/31 Javascript
JS异步错误捕获的一些事小结
2019/04/26 Javascript
JS中FormData类实现文件上传
2020/03/27 Javascript
基于vue 动态菜单 刷新空白问题的解决
2020/08/06 Javascript
vue 导出文件,携带请求头token操作
2020/09/10 Javascript
Python 私有函数的实例详解
2017/09/11 Python
简述:我为什么选择Python而不是Matlab和R语言
2017/11/14 Python
如何在python中使用selenium的示例
2017/12/26 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
python在新的图片窗口显示图片(图像)的方法
2019/07/11 Python
PYTHON EVAL的用法及注意事项解析
2019/09/06 Python
python自动分箱,计算woe,iv的实例代码
2019/11/22 Python
Python namedtuple命名元组实现过程解析
2020/01/08 Python
通过代码实例了解Python sys模块
2020/09/14 Python
Python下使用Trackbar实现绘图板
2020/10/27 Python
4款Python 类型检查工具,你选择哪个呢?
2020/10/30 Python
一体化教学实施方案
2014/05/10 职场文书
离职保密承诺书
2014/05/28 职场文书
校庆口号
2014/06/20 职场文书
一般党员对照检查材料
2014/09/24 职场文书
2016年小学教师师德承诺书
2016/03/25 职场文书
Python数据分析之pandas读取数据
2021/06/02 Python
微信小程序中wxs文件的一些妙用分享
2022/02/18 Javascript