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 相关文章推荐
IE8下关于querySelectorAll()的问题
May 13 Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 Javascript
JS重要知识点小结
Nov 06 Javascript
jquery load事件(callback/data)使用方法及注意事项
Feb 06 Javascript
常用js字符串判断方法整理
Oct 18 Javascript
JavaScript遍历table表格中的某行某列并打印其值
Jul 08 Javascript
JS优化与惰性载入函数实例分析
Apr 06 Javascript
Angular.js前台传list数组由后台spring MVC接收数组示例代码
Jul 31 Javascript
Vue官网todoMVC示例代码
Jan 29 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
Vue中 v-if 和v-else-if页面加载出现闪现的问题及解决方法
Oct 12 Javascript
javascript异常处理实现原理详解
Feb 17 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
Windows中安装Apache2和PHP4权威指南
2006/11/18 PHP
优化PHP代码的53条建议
2008/03/27 PHP
PHP 图片上传实现代码 带详细注释
2010/04/29 PHP
PHP读取xml方法介绍
2013/01/12 PHP
浅析PHP中的UNICODE 编码与解码
2013/06/29 PHP
ThinkPHP3.1.3版本新特性概述
2014/06/19 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
6个常见的 PHP 安全性攻击实例和阻止方法
2020/12/16 PHP
jQuery jcrop插件截图使用方法
2013/11/20 Javascript
angularjs基础教程
2014/12/25 Javascript
Javascript中的getUTCHours()方法使用详解
2015/06/10 Javascript
利用JavaScript脚本实现滚屏效果的方法
2015/07/07 Javascript
jQuery on()方法示例及jquery on()方法的优点
2015/08/27 Javascript
js中substring和substr两者区别和使用方法
2015/11/09 Javascript
JavaScript程序设计之JS调试
2015/12/09 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
2017/02/15 Javascript
AngularJS前端页面操作之用户修改密码功能示例
2017/03/27 Javascript
微信小程序switch开关选择器使用详解
2018/01/31 Javascript
解决在vue项目中webpack打包后字体不生效的问题
2018/09/01 Javascript
Vue-cli assets SubDirectory及PublicPath区别详解
2020/08/18 Javascript
[53:15]2018DOTA2亚洲邀请赛3月29日 小组赛A组 LGD VS TNC
2018/03/30 DOTA
python3中set(集合)的语法总结分享
2017/03/24 Python
Python+selenium实现截图图片并保存截取的图片
2018/01/05 Python
3分钟学会一个Python小技巧
2018/11/23 Python
python安装numpy和pandas的方法步骤
2019/05/27 Python
基于pytorch的lstm参数使用详解
2020/01/14 Python
python中pivot()函数基础知识点
2021/01/03 Python
一套Java笔试题
2016/08/20 面试题
视图的作用
2014/12/19 面试题
学雷锋标语
2014/06/25 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
2014群众路线学习笔记
2014/11/06 职场文书
2014年班主任德育工作总结
2014/12/05 职场文书
质检员工作总结2015
2015/04/25 职场文书
2015年国庆节广播稿
2015/08/19 职场文书
如何让你的Nginx支持分布式追踪详解
2022/07/07 Servers