vue的虚拟DOM会操作DOM吗-,vue虚拟dom和真实dom

　　vue的虚拟DOM会操作DOM吗?,vue虚拟dom和真实dom

　　本文主要介绍vue中虚拟dom知识点的总结。文章重点对课题内容进行了详细介绍。需要的朋友可以参考一下，希望对你的学习有帮助。

　　一.导言VUE为什么引入虚拟DOM？三。vnode1.vnode类型IV。虚拟dom的核心——patch1.patch进程添加节点删除节点更新节点静态节点新增带文本属性的虚拟节点新增不带文本属性的虚拟节点五、更新子节点的优化策略

　　易于使用的程序中的状态很难管理，代码中的逻辑也很混乱。现在三大主流框架是声明式操作DOM。通过描述状态和DOM之间的映射关系，可以将状态渲染到视图中。状态可以是JS中的任何类型。将状态作为输入并生成DOM输出到页面进行显示的过程称为呈现。通常，当程序运行时，状态会不断变化。当状态改变时，需要重新渲染。如何确定状态发生了什么变化，DOM哪里需要更新？最简单最残酷的解决方法：删除所有的DOM，用状态重新生成一个DOM，输出到页面显示。但是，访问dom非常昂贵，会造成相当大的性能浪费。

　　虚拟DOM的解决方案是通过状态生成一个虚拟节点树，然后使用虚拟节点树进行渲染。渲染前会对比新旧虚拟DOM，只渲染不同的部分。虚拟DOM是将状态映射为视图是众多解决方案之一。

一、简介

　　Vue在某种程度上知道哪个状态发生了变化，哪些节点使用了这个状态，这样就可以通过更细粒度的绑定来更新视图。代价是如果粒度太细，会有很多观察者同时观察一些状态，会有一些内存开销以及一些依赖追踪的开销。Vue2.0采用了中等粒度的解决方案。状态检测只细化到某个组件，视图通过组件内部的虚拟DOM渲染，可以大大减少依赖和观察者的数量。Vue通过模板描述状态和视图之间的映射关系。它首先将模板编译成渲染函数，然后执行渲染函数来生成虚拟节点，并使用虚拟节点来更新视图。

　　虚拟DOM在vue中的作用：提供虚拟节点和对比新旧vnode，并根据对比结果进行DOM操作来更新视图。

二、为什么VUE引入了虚拟DOM？

　　vnode类可以实例化不同类型的vnode实例，不同类型的VNode实例分别代表不同类型的DOM元素。Vnode可以理解为一个节点描述对象，描述如何创建一个真正的DOM。

三、vnode

　　注意：只有两个有效属性：isComment属性和text属性。文本节点：只有文本属性元素。节点：标签、数据(节点的数据：属性、类、样式等。)、子节点、上下文(当前组件的vue实例)组件节点：唯一属性是componentOptions(组件节点的option参数)、componentInstance(组件实例)功能组件：类似于组件节点，唯一属性是functionalContext和functionalOptions克隆节点：将已有节点的属性复制到新节点，与克隆节点的唯一区别是isCloned属性，克隆节点的isCloned为真。功能是优化静态节点和槽节点。

1.vnode的类型

　　可以把vnode渲染成一个真正的DOM，实际的作用是计算出真正需要更新的节点，修改现有的DOM，达到更新视图，最大限度减少DOM操作，显著提升性能的目的。本质是用js的运算成本替换DOM操作的执行成本。js比DOM快很多，所以性价比很高。

四、虚拟dom的核心——patch

　　是基于新的vnode添加、删除和更改节点。

1.patch的过程

　　OldVnode不存在，但它存在于Vnode中。通常发生在第一次渲染时。vnode和oldVnode根本不是同一个节点。vnode是一个新节点，而oldVnode是一个废弃的节点。

新增节点

　　该节点仅存在于oldVnode中。替换过程是在旧节点旁边插入新创建的DOM节点，然后删除旧节点。

删除节点

　　添加和删除节点的共同点是这两个虚拟节点完全不同。旧节点和新节点是同一个文本节点，需要更细致的比较。

更新节点

　　静态节点：一旦呈现在页面上，就不会改变。如果两个虚拟节点是新旧的，静态节点会直接跳过更新节点。

静态节点

　　如果新的虚拟节点有text属性，并且与旧的不同，直接调用setTextContent方法(浏览器环境下的node.textContent方法)将视图中DOM节点的内容更改为虚拟节点的text属性保存的文本。

新虚拟节点有文本属性

　　新虚拟节点有children：

　　旧的虚拟节点也有子节点的属性，所以更详细地比较新旧虚拟节点的子节点，并更新它们(添加、删除和更改)。旧的虚拟节点没有children属性，这意味着旧的虚拟节点要么是空标签，要么是带有文本的文本节点。如果是文本节点，首先清空文本使其成为空标签，然后将新的虚拟节点(vnode)中的子节点逐个创建为真实的DOM元素节点，并插入到视图中的DOM节点下。新虚拟节点无children：

　　没有文本或子节点，这意味着它是一个空节点。将旧的虚拟节点删除到空标签中。

新虚拟节点无文本属性

　　双端比较。只要试着用同一个位置的两个节点来比较是否是同一个节点：如果恰好是同一个节点，就可以直接进入更新节点的操作；如果尝试失败，则循环查找该节点。这样做可以大大避免循环oldChildren寻找节点，从而大大提高执行速度。

　　oldChildren循环首先完成。如果newChildren中还有剩余的节点，这意味着需要添加这些节点。只需将这些节点直接插入DOM。newChildren循环首先完成，如果oldChildren中有任何剩余节点，oldChildren中的剩余节点是被放弃的节点，应该被删除。不用循环比较就可以知道这些节点需要从DOM中移除。关于vue中虚拟dom知识总结的这篇文章就到这里了。关于vue中更多相关的虚拟dom内容，请搜索我们之前的文章或者继续浏览下面的相关文章。希望大家以后能多多支持我们！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。