浅谈vue单一组件下动态修改数据时的全部重渲染
更新时间：2018年03月01日 15:08:19 作者：Aman920_
下面小编就为大家分享一篇浅谈vue单一组件下动态修改数据时的全部重渲染，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
今天在学习vue的过程中，发现一个有趣的现象。
在某一组件下的某一数据通过点击事件被动态修改的时候，对应view中的数据同步的进行了修改，没错，这不是废话吗，vue的一大特色就是数据的双向绑定。可有趣的是，该组件下我写的另一个用Math.random()的data值对应的值和视图也发生了变化
这就让我这个刚入门的小白有点奇怪了，我修改一个，怎么变了两个？？？？脑洞放开一想，会不会数据在双向同步的时候，发生了什么，比如。是不是只要有一个节点变了，node都重新进行了加载？？？
我想这其中的缘由必定和vue数据的双向绑定的原理有关联，就搜索了一番，果然发现了些东西，就是DocumentFragment，之前好像见过，但没怎么重视。那么它是用来干啥的呢:
DocumentFragment（文档片段）可以看作节点容器，它可以包含多个子节点，当我们将它插入到 DOM 中时，只有它的子节点会插入目标节点，所以把它看作一组节点的容器。使用 DocumentFragment 处理节点，速度和性能远远优于直接操作 DOM。
手动划重点：Vue 进行编译时，就是将挂载目标的所有子节点劫持（真的是劫持，通过 append 方法，DOM 中的节点会被自动删除）到 DocumentFragment 中，经过一番处理后，再将 DocumentFragment 整体返回插入挂载目标。
以上这篇浅谈vue单一组件下动态修改数据时的全部重渲染就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了ElementUI 修改默认样式的几种办法(小结)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-07-07
在现代网页设计中,文字打字机效果是一种非常流行的动画效果,能够吸引用户的注意力并提升用户体验,本文将介绍如何在 Vue 3 中使用 TypeIt 库实现文字打字机效果,并分享一些实用的技巧和示例,需要的朋友可以参考下2025-01-01
这篇文章主要为大家介绍了前端高效配置化vue2 element ui省时又省力,有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
组件间通信简单来说就是组件间进行数据传递。就像我们日常的打电话，就是通讯的一种方式，你把话说给我听，我把话说给你听，说的话就是数据。电话就是通讯方式的一种。无论是 Vue 还是 React ，都得进行组件间通信。2021-05-05
在Vue中最重要、最核心的概念之一就是响应式系统。这个系统使得Vue能够自动追踪数据变化，并在数据发生变化时自动更新相关的DOM元素。本文将会探讨Vue响应式系统的实现原理及其底层实现2023-03-03
在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下2021-07-07
解决vue打包后刷新页面报错：Unexpected token <
这篇文章主要介绍了解决vue打包后刷新页面报错：Unexpected token <相关知识点，需要的朋友们参考下。2019-08-08
本篇文章中主要介绍了Vue.js 中的 $watch使用方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-05-05
这篇文章主要给大家介绍了关于vue打包上传服务器刷新404问题的两种方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-04-04
浅谈vue中使用编辑器vue-quill-editor踩过的坑
这篇文章主要介绍了浅谈vue中使用编辑器vue-quill-editor踩过的坑，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
最新评论