文档章节

Vue 就地复用策略注意事项

o
 osc_odyg6b92
发布于 2018/07/13 16:11
字数 701
阅读 8
收藏 0

「深度学习福利」大神带你进阶工程师,立即查看>>>

---template部分
div
el-popover(ref="message", placement="top-start", title="标题", width="100", trigger="hover",content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。"
a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是无辜的
a(href="javascript:void(0)", v-popover:message="", style="margin-right:10px") 显示弹窗
a(href="javascript:void(0)", v-if="show", style="margin-right:10px") 我是无辜的2
---js部分
mounted () {
setTimeout(() => {
this.show = true;
}, 2000);
}

这段代码会出现这样的情况:

1.页面进入时,鼠标放在 “显示弹窗”上 popover气泡会出现

2.两秒钟之后 鼠标放在 “显示弹窗”上 popover气泡不再出现,而鼠标放在 “我是无辜的” a 标签上,popover出现

 

原因:

1.在刚进入页面时VNode树只有一个 a标签

div

    a(显示弹窗)

2.2秒之后VNode树

div

   a(我是无辜的)

   a(显示弹窗)

   a(我是无辜的2)

 

Vue 在2秒后,生成了新的Vnode树,这时Vue 将对比这两棵树,以此来修改dom

Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法

上面那个例子,正是由于 第一棵树的  a(显示弹窗) 这个node  被复用导致的

因为他们是相同类型元素,复用了这个元素后, 会把 a(我是无辜的) 节点相应的静态属性 重新赋值给 a(显示弹窗)  元素,包括 文本内容,class名等。

这基本上让大家看不到被复用的痕迹,就好像是新创建了 a(我是无辜的) node 一样

其实,a(我是无辜的)  本体就是 a(显示弹窗)  元素。 这样,在2秒之后,鼠标放在 a(我是无辜的)  node 上,显示出popover,的现象就可以解释了

 

 

特性

 key 

key 的特殊属性主要用在 Vue 的虚拟 DOM 算法,在新旧 nodes 对比时辨识 VNodes。

如果不使用 key,Vue 会使用一种最大限度减少动态元素并且尽可能的尝试修复/再利用相同类型元素的算法。

使用 key,它会基于 key 的变化重新排列元素顺序,并且会移除 key 不存在的元素。

 

Vue 在进行 v-for 静态编译时, 如果发现没有指定 :key ,或者 重复的key 会给出 警告提示。

上面的例子,可以看成 是 手动写的v-for 相当于 a(v-for=(item in [1,2,3])) 。

 

为了避免上例子的情况 可以给 a标签上 加上 :key 来避免。

但是,也必须要根据场景灵活使用,

有时加上key 也可以会引起  触发过渡:

<transition>
<span :key="text">{{ text }}</span>
</transition>

只要一改变 text 就有动效

 

总之,灵活使用吧,哈哈

 
o
粉丝 1
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。
CSS 选择器--Q.js

1, 和Sizzle的兼容 Q(expr, context, result, seed) Q.matches 支持Sizzle特别的setFilter伪类如:even,:first,:last,:lt... 支持复杂的:not和:has选择器(和sizzle一样) 2, 结果的正确性 Si...

hackwaly
2012/10/23
4.6K
0
c-string转换工具集合--stringencoders

c-string转换工具集合,比标准实现快2倍以上(如果有的话)。——该项目被Google Chrome使用。 包括以下C字符串转换工具 base64, standard base64, web/url safe, with configurable alphabe...

江斌
2012/11/07
4.8K
1
用 VIPER 构建 iOS 应用架构(2)

【编者按】本篇文章由 Jeff Gilbert 和 Conrad Stoll 共同编写,通过构建一个基础示例应用,深入了解 VIPER,并从视图、交互器等多个部件理清 VIPER 的整体布局及思路。通过 VIPER 构建 iOS ...

OneAPM蓝海讯通
2015/08/07
289
0
Apache Ignite(八):核心特性一览

1.事务和分析 1.1.数据网格 Ignite内存数据网格是一个内存内的键值存储,他可以在分布式集群的内存内缓存数据。它通过强语义的数据位置和关系数据路由,来降低冗余数据的噪声,使其可以节点数...

李玉珏
2016/05/28
3.2K
5
前端最新技术学习地址总结

主流技术官网总结 1.1. 工具类 Glup 官网:http://www.gulpjs.com.cn/ http://i5ting.github.io/stuq-gulp/#10202 Webpack 官网:http://webpack.js.org GitBook:http://fakefish.github.io/r......

龙马行空
2016/01/14
1.9K
1

没有更多内容

加载失败,请刷新页面

加载更多

OSPF综合实验

OSPF开放路径最短选择优先协议(IGP协议、链路状态协议) 支持大型网络,通过彼此交互hello建立邻居关系,在通过彼此交互的LSA通过SPF算法算出最优路由的到自己去往其他节点路径。 OSPF的DR、...

osc_qmxpov5s
11分钟前
0
0
vmlogin多平台·多账号·安全提速系统·稳定浏览器指纹环境

VMLogin-稳定浏览器指纹环境,Cookie隔离,稳定,更高效,更智能的多账号管,从超级浏览器开始,让你的跨境之旅更便捷! VMLogin生成多个唯一指纹浏览器,每个指纹浏览器都是相互隔离的。 可以...

VMlogin中文版防关联浏览器
11分钟前
0
0
Buurst SoftNAS操作手册—Part1 如何在AWS上部署SoftNAS

前言 Buurst SoftNAS为企业提供高性能、易管理、高可用、极具经济效益的存储服务,无论是在私有云还是公有云环境下均可实现一键部署。Buurst SoftNAS可为企业提供软件定义NAS文件管理器并提供...

osc_cyo5y1ey
12分钟前
0
0
《闲扯Redis十》Redis 跳跃表的结构实现

一、前言 Redis 提供了5种数据类型:String(字符串)、Hash(哈希)、List(列表)、Set(集合)、Zset(有序集合),理解每种数据类型的特点对于redis的开发和运维非常重要。 原文解析:h...

大道七哥
13分钟前
0
0
BGP综合实验

BGP边界网关协议 BGP是目前使用的唯一的自治系统间的路由协议,它是一种矢量路由协议,基于TCP的179号端口,它采用单播增量更新的方式更新路由,与其他的路由协议不同的是,BGP只要TCP可达,...

osc_tybx1rlt
13分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部