今天在学习vue的过程中,发现一个有趣的现象
在某一组件下的某一数据通过点击事件被动态修改的时候,对应view中的数据同步的进行了修改,没错,这不是废话吗,vue的一大特色就是数据的双向绑定。可有趣的是,该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化
这就让我这个刚入门的小白有点奇怪了,我修改一个,怎么变了两个????.........脑洞放开一想,会不会数据在双向同步的时候,发生了什么,比如。。。是不是只要有一个节点变了,node都重新进行了加载???
我想这其中的缘由必定和vue数据的双向绑定的原理有关联,就搜索了一番,果然发现了些东西,就是DocumentFragment,之前好像见过,但没怎么重视。那么它是用来干啥的呢:
DocumentFragment(文档片段)可以看作节点容器,它可以包含多个子节点,当我们将它插入到 DOM 中时,只有它的子节点会插入目标节点,所以把它看作一组节点的容器。使用 DocumentFragment 处理节点,速度和性能远远优于直接操作 DOM。