Vue 动态组件与 v-once 指令的实现_vue.js

最新推荐文章于 2021-12-29 10:04:34 发布
最新推荐文章于 2021-12-29 10:04:34 发布
阅读量306 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44109689/article/details/103867042
版权

本文介绍了Vue 动态组件与 v-once 指令的实现，分享给大家，具体如下：

上面代码需实现，当点击按钮时，child-one和child-two实现toggle效果，该怎么实现呢？

通过上面handleBtnClick函数的实现，配合v-if指令就能实现toggle效果

动态组件

下面这段代码实现的效果和上面是一样的。

动态组件的意思是它会根据is里面数据的变化，会自动的加载不同的组件

v-noce指令

每次点击按钮切换的时候，Vue 底层会帮我们干什么呢？Vue 底层会判断这个child-one组件现在不用了，取而代之要用child-two组件，然后它就会把child-one组件销毁掉，在创建一个child-two组件。假设这时child-two组件要隐藏，child-one组件要显示，这个时候要把刚刚创建的child-two销毁掉，在重新创建child-one组件，也就是每一次切换的时候，底层都是要销毁一个组件，在创建一个组件，这种操作会消耗一定的性能。如果我们的组件的内容，每次都是一样的可以在上面加一个v-once，看下面代码。

加上v-once指令之后，有什么好处呢？当chlid-one组件第一次被渲染时，因为组件上面有一个v-once指令，所以它直接就放到内存里了，当切换的时候child-two组件第一次被渲染时，它也会被放到内存里，再次点击切换时，这时并不需要再重新创建一个child-one组件了，而是从内存里直接拿出以前的child-one组件，它的性能会更高一些。

所以在 Vue 当中，通过v-once指令，可以提高一些静态内容的展示效率

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

原文链接：https://segmentfault.com/a/1190000018121207

!!!

諼
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vue 动态组件与 v-once 指令的实现
10-17
主要介绍了Vue 动态组件与 v-once 指令的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue学习笔记之动态组件和v-once指令简单示例
09-17
主要介绍了vue学习笔记之动态组件和v-once指令,结合简单实例形式详细分析了vue.js动态组建点击切换相关操作技巧,需要的朋友可以参考下
vue_的基本格式
liu1992452008的博客http://write.blog.csdn.net/configu
11-18 763
fgffd{{msg}} 对对对{{msg}} new Vue({ el:'#app', data:{ msg:'今天的天气很好' } })
v-once
齐枫的博客
06-17 2501
只渲染元素和组件一次。随后的重新渲染,元素/组件及其所有的子节点将被视为静态内容并跳过。这可以用于优化更新性能。 This will never change: {{msg}} comment {{msg}} {{i}}
Vue.js 实现一次性插值的 v-once指令【笔记】
单枪匹码
06-08 427
Vue.js中实现双向绑定的过程中，通过使用v-once指令，可以实现一次性的插值，当数据改变时，插值处的内容不会更新。 <span v-once>这个值将不会改变：{{msg}}</span> 说明：数据在第一次插值后，后续修改过程中数据将不会再更新。但是要注意的是，该指令添加的节点是否还有其他的数据，这会影响到其它数据的绑定。 ...
vue源码之$once是如何实现的
少油少盐不要辣
03-14 1064
1. 前言 之前研究了下观察者模式，但是事件注册后，都需要手动移除。就在琢磨，能否执行一次后，自动移除。正好vue有这一功能。于是，研究了下相关代码。 2.vue的$once vue的事件处理代码放在了events.js文件中。它的$once长这样： /** * Adds an `event` listener that will be invoked a single * time then automatically removed. * * @param {String} event * @
Vue 动态组件components和v-once指令的实现
12-29
一、实现两个组件间互相展示、互相隐藏 <!DOCTYPE html> <html> <head> <title>动态组件</title> [removed][removed] </head> <body> <child v-if=type content=child...
v-once(一次)
zhangyiyang111的博客
03-30 126
v-once(一次) 1.v-once:没有表达式 2.使用了v-once指令所在直接元素以及他下面的所有子元素,页面一旦渲染成功时候,所有数据将不再发生改变.简言之:v-once所在元素称之为静态内容. 案例: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=e
vue源码解析：vue事件方法之$once方法的实现原理
lee前端技术站
07-13 3208
vue中事件方法一共就四个，挂载在vue实例上的$once用来监听某个自定义事件，通常会用到，那么$once的内部实现原理是什么呢？下面我们来详细说下$once: 参数： {string} event {Function} callback 作用： 监听一个自定义事件，但是只触发一次。一旦触发之后，监听器就会被移除。 原理： Vue.prototype.$once = function (event, fn) { const vm: Component = this funct
Vue.js 源码分析(二十) 指令篇 v-once指令详解
weixin_30709809的博客
07-08 167
数据绑定最常见的形式就是使用“Mustache”语法 (双大括号) 的文本插值，例如:<p>Message: {{ msg }}</p>以后每当msg属性发生了改变，插值处的内容都会自动更新。 可以给DOM节点添加一个v-once指令，这样模板只会在第一次更新时显示数据，此后再次更新该DOM里面引用的数据时，内容不会自动更新了，例如: <!DOCTYPE ht...
vue学习20-21：动态组件和v-once指令
simoon's的博客
05-07 183
v-once指令2、动态组件
Vue技术—v-once指令
u013140948的博客
12-29 217
v-once指令： 1.v-once所在节点在初次动态选然后，就视为动态内容了， 2.以后数据的改变不会引起v-once所在结构的变更，可以用于优化性能 <div id="root"> <h2 v-once>当前n的值时：{{n}}</h2> <h2>当前n的值时：{{n}}</h2> <button @click='n++'>点我n+1</button> </div> <script> ne
Vue的 v-once 指令 （只在首次加载时更新一次内容）
qq_44277696的博客
09-25 985
v-once 作用：专门标记一个元素只在首次加载时更新一次内容，之后，即使变量发生变化，元素内容也不更新。 原理：new Vue（）扫描到 v-once 后，只更新一次v-once所在元素的内容，并且不会将v-once加入虚拟DOM树,今后,即使变量值发生变化,也无法通知到v-once所在的元素,自然不会更新元素的内容 优化: 如果今后发现个别元素只需要在首次页面加载更新一次,之后不会在更新,都可以用v-once标记,进一步减少虚拟DOM树种元素的个数,进一步提高虚拟DOM树的效率 代码: <!D
掌握vue指令之(9)v-once指令
weixin_43348064的博客
05-20 392
(9)v-once指令 问题:有些绑定只在首次加载时，修改一次。之后其他地方的修改，都不会影响这里的显示结果。如果一个元素之后不需要再更新，但是却占着虚拟DOM树中的一个位置，会影响虚拟DOM树的遍历速度！ 解决: 如果只在首次加载时显示，之后其他地方修改，这里都不会受影响的绑定，可用v-once绑定。 写法：<元素 v-once>{{变量或js表达式}}></元素> 原理: 只在首次渲染页面时，替换元素的绑定语法内容。但是不会将当前元素加入虚拟DOM树。结果: 只在首次加载一
动态组件和v-once指令
zl13015214442的博客
02-24 138
1、动态组件 我们首先看一个例子，首先定义两个子组件，要实现的功能是点击change按钮，进行两个组件的切换： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;动态组件与v-once指令&lt;/title&
Vue 3基础[4] : 使用 v-once 指令锁定内容
学习笔记
11-23 656
例子如下，使用 v-once 指令， Initial value 保持不变，不会更新，Result 动态改变。 <p v-once>Initial value {{ counter }}</p> <p>Result: {{ counter }}</p>
vue中v-once
cmolong的博客
03-08 2703
v-once 作用： 执行一次性地插值，当数据改变时，插值处的内容不会更新，v-once所定义的元素或组件只会渲染一次，首次渲染后，不再随着数据的改变而重新渲染。也就是说使用v-once，该块都将被视为静态内容。 &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;v...
406_智能小区管家服务系统的设计与实现-源码.zip
最新发布
06-02
提供的源码资源涵盖了安卓应用、小程序、Python应用和Java应用等多个领域，每个领域都包含了丰富的实例和项目。这些源码都是基于各自平台的最新技术和标准编写，确保了在对应环境下能够无缝运行。同时，源码中配备了详细的注释和文档，帮助用户快速理解代码结构和实现逻辑。 适用人群： 这些源码资源特别适合大学生群体。无论你是计算机相关专业的学生，还是对其他领域编程感兴趣的学生，这些资源都能为你提供宝贵的学习和实践机会。通过学习和运行这些源码，你可以掌握各平台开发的基础知识，提升编程能力和项目实战经验。 使用场景及目标： 在学习阶段，你可以利用这些源码资源进行课程实践、课外项目或毕业设计。通过分析和运行源码，你将深入了解各平台开发的技术细节和最佳实践，逐步培养起自己的项目开发和问题解决能力。此外，在求职或创业过程中，具备跨平台开发能力的大学生将更具竞争力。 其他说明： 为了确保源码资源的可运行性和易用性，特别注意了以下几点：首先，每份源码都提供了详细的运行环境和依赖说明，确保用户能够轻松搭建起开发环境；其次，源码中的注释和文档都非常完善，方便用户快速上手和理解代码；最后，我会定期更新这些源码资源，以适应各平台技术的最新发展和市场需求。
vue2 组件懒加载
12-30
2. 在需要使用组件的地方使用 `v-once` 指令加载组件：通过在组件所在的标签上添加 `v-once` 指令，当组件首次加载完成后会将组件的内容缓存起来，下一次组件重新加载时，会直接使用缓存中的内容，而不再重新渲染。...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值