如果 oldVnode和 newVnode不是同一个虚拟节点，那么就直接暴力删除旧的，插入新的。
最近在做一个项目，是一个b/s架构的，在项目中，用到了树形结构，即如图1所示的结构。
Vue.js是一个流行的JavaScript框架，它使得构建复杂的交互式应用程序变得更容易。Vue.js基于MVVM模式设计，采用了响应式数据绑定和组件化的架构。在Vue.js中，数据绑定是非常重要的概念，它通过使用观察者模式来追踪数据变化并自动更新DOM。
Vue.js是一款流行的JavaScript框架，它采用了虚拟DOM（Virtual DOM）的概念来提高性能和开发效率。虚拟DOM是Vue.js的核心之一，它通过在内存中构建一个轻量级的DOM树来代替直接操作真实的DOM，从而减少了对真实DOM的操作次数，提高了页面渲染效率。本文将深入探讨Vue.js中虚拟DOM的作用、核心源码分析。
之前讲到Vue在渲染机制的优化上，引入了Virtual DOM的概念，利用Virtual DOM描述一个真实的DOM,本质上是在JS和真实DOM之间架起了一层缓冲层。当我们通过大量的JS运算,并将最终结果反应到浏览器进行渲染时，Virtual DOM可以将多个改动合并成一个批量的操作，从而减少 dom 重排的次数，进而缩短了生成渲染树和绘制节点所花的时间，达到渲染优化的目的。之前的章节，我们简单的介绍了Vue中Vnode的概念，以及创建Vnode到渲染Vnode再到真实DOM的过程。如果有忘记流程的，可以参考前面的章节分析。
在前端中，主要涉及的基本上就是 DOM的相关操作 和 JS，我们都知道 DOM 操作是比较耗时的，那么在我们写前端相关代码的时候，如何减少不必要的 DOM 操作便成了前端优化的重要内容。
从头创建您自己的vuei .js——第3部分(构建VDOM) 如果你喜欢这篇文章，你可能也会喜欢我的推特。如果你很好奇，可以看看我的Twitter简介。? 这是“从头创建您自己的vuei .js”系列
二叉树中的节点最多只能有2个子节点，一个是左侧子节点，一个是右侧子节点，这样定义的好处是有利于我们写出更高效的插入，查找，删除节点的算法。
标题看起来有点唬人，在微信小程序里跑 h5 页面，不会又是说使用 web-view 组件来搞吧？确实，使用 web-view 组件可以达到跑 h5 页面的要求，但是 web-view 组件在使用上还是有一些限制：不支持个人类型与海外类型的小程序、不支持全屏、页面与小程序通信不方便、很多小程序接口无法直接调用等。
曾经听说很多人被问到过虚拟DOM和DOM-diff算法是如何实现的，有没有研究过？
JavaScript 《JavaScript权威指南》 jQuery和Ajax
当前国内小程序平台众多，微信小程序、支付宝小程序、头条小程序、以及未来还会出现的新小程序平台，所以为了解决一套代码可以在多个小程序平台上运行，出现了多种方案来解决，京东的 Taro、蚂蚁的 Remax、微信的 Kbone，各有特点，主要归为两种类型，编译时与运行时适配两种。
最近公司面试了一些中高级前端，由于公司技术栈以 Vue 为主，而对于中高级前端，必不可少要问及 Vue 源码的问题。很多面试者，对于源码只能简单讲到响应式是基于 Object.defineProperty 或者 Proxy 等老生常谈的基础概念。Vue 经过这么多年的发展，成了很多前端开发者职业生涯不可或缺的一个框架。诚然，每个人都可以在短时间学习一个框架的使用，但是要深入阅读它的源码确实不是一件容易的事。这里面有很多因素，除了业务开发繁忙外，面对一个复杂庞大的代码库，以及众多平时不经常使用的构建工具和新的编程语言等干扰因素，我们时常不知道该从哪里切入。为了应付面试，只能通过一些面经文章和博客，快速获得一些基本的认知，但一旦面试官深入拷问，真正看过源码还是只看过文章，就水落石出。真正读懂源码不是靠一场突击战就能做到的，而是像浇花种树一样，日积月累，反复刻意的练习和回顾，到最后甚至可以自己写出一个框架，才算真正掌握。既然是一场持久战，我们就不能指望在短时间内把整个框架一口吃进去，而是将其分割成一个个小的技术点，一次消化一个单一技术点，连点成线，最后就能吃下整个框架。本文以及接下来一系列文章，尝试将 Vue 源码拆分成独立的技术点，并动手编码实现。
本文为一次前端技术分享的演讲稿，所以尽力不贴 Vue.js 的源码，因为贴代码在实际分享中，比较枯燥，效果不佳，而更多的是以图片和文字的形式进行表达。
作者：xieyu React 中 state render 到 html dom 的流程分析Questions React 的 component的 lifecycle 在 react 中是怎么被调到的. 分析 jsx => element tree => fiber tree => html dom 在 react 中的流程. react 中的 fiber tree 的建立和执行, 以及异步的 schedule. 📷 研究工具和方法 chrome debug 打断点 ag the silver searc
virtual dom，即虚拟 dom，虚拟 dom 对应的是真实 dom，使用 document.CreateElement 和 document.CreateTextNode 创建的就是真实节点。
虚拟DOM是对DOM的一层抽象，以Javascript对象（VNode节点）作为基础的树。 用对象的属性描述节点，最后通过一些方法将其映射为真实的环境上，因此可实现跨平台。 当前主流前端框架React、Vue以及各种小程序的界面渲染都是用到的虚拟DOM技术。
1.初始化的第一阶段是Vue实例也就是vm对象创建前后：首先Vue进行生命周期，事件初始化发生在beforeCreate生命周期函数前，然后进行数据监测和数据代理的初始化，也就是创建vm对象的过程，当vm对象创建完成就可以通过vm对象访问到劫持的数据，比如data中的数据，methods中的方法等。然后Vue调用内部的render函数开始解析模板将其解析为一个JS对象也即在内存中生成虚拟DOM也就是Vnode对象。第二阶段是vm对象挂载前后：挂载完成前页面呈现的是未经过Vue编译的DOM结构，所有对DOM的操作最终都不会生效。挂载前首先将内存中的Vnode转换为真实DOM插入页面，此时完成挂载。页面中呈现的就是经过Vue编译的DOM结构，至此初始化过程结束。
作用： 当子节点不为 null，则复用子节点并删除其兄弟节点； 当子节点为 null，则创建新的 fiber 节点
面试官:"你了解虚拟DOM(Virtual DOM)跟Diff算法吗,请描述一下它们";
文本主要介绍文档对象模型(DOM),了解什么是DOM操作，以及如何使用砶 DOM API 与 JS 中的 Web 页面进行交互。
目前前端使用最多的就是 vue 或 react 了，我们在学习这两个框架的过程中，总有一个绕不开的话题：vnode，也就是虚拟 DOM。什么是虚拟 DOM，引用一段 vue 官方的解释就是：
原生的JS DOM操作非常消耗性能，而React把真实原生JS DOM转换成了JavaScript对象。这就是虚拟Dom（Virtual Dom）
当浏览器接收到一个Html文件时，JS引擎和浏览器的渲染引擎便开始工作了。从渲染引擎的角度，它首先会将html文件解析成一个DOM树，与此同时，浏览器将识别并加载CSS样式，并和DOM树一起合并为一个渲染树。有了渲染树后，渲染引擎将计算所有元素的位置信息，最后通过绘制，在屏幕上打印最终的内容。JS引擎和渲染引擎虽然是两个独立的线程，但是JS引擎却可以触发渲染引擎工作，当我们通过脚本去修改元素位置或外观时，JS引擎会利用DOM相关的API方法去操作DOM对象,此时渲染引擎变开始工作，渲染引擎会触发回流或者重绘。下面是回流重绘的两个概念：
前面陆陆续续的写过一些ztree的文章，但调用的是后端的接口，demo拿过去没有办法可以直接查看前端的界面，这就造成了一部分人对此理解的困扰。
DOM（Document Object Model）即文档对象模型，针对HTML和XML文档的API（应用程序接口）。 一．DOM介绍 DOM中的三个字母，D（文档）可以理解为整个Web加载的网页文档；O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；M（模型）可以理解为网页文档的树型结构。 DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox、Safa
表示HTML文档元素的HTMLElement对象定义了读/写属性。映射了元素的HTML属性。HTMLElement定义了通用的HTTP属性。以及事件处理程序的属性。特定的Element子类型为其元素定义了特定的属性。
Trie树，即字典树，又称前缀树，是一种树形结构，典型应用是用于统计和排序大量的字符串（但不限于字符串），所以经常被搜索引擎用于文本词频统计。它的优先是，最大限度的减少无谓的字符串比较，提高查找效率。
前面的话：zTree 是一个依靠 jQuery 实现的多功能 “树插件”。优异的性能、灵活的配置、多种功能的组合是 zTree 最大优点。专门适合项目开发,尤其是 树状菜单、树状数据。
diff是什么？diff就是比较两棵树，render会生成两颗树，一棵新树newVnode，一棵旧树oldVnode，然后两棵树进行对比更新找差异就是diff，全称difference，在vue里面 diff 算法是通过patch函数来完成的，所以有的时候也叫patch算法
一篇介绍从各个角度介绍数据变化和UI变化的文章，解析了主流的库是怎么工作的：http://teropa.info/blog/2015/03/02/change-and-its-detection-in-javascript-frameworks.html 分析了过去和现在的JS框架是怎么处理前端数据和页面更新的。
创建元素 createElement ，创建内容 createTextNode ，添加元素 appendChild
selector.append(节点对象)：在selector元素内部的最后插入"节点对象"
因为使用了 Virtual DOM 的原因，Vue.js具有了跨平台的能力，例如：weex、小程序、web、h5、等
虚拟 DOM （Virtual DOM ）这个概念相信大家都不陌生，从 React 到 Vue ，虚拟 DOM 为这两个框架都带来了跨平台的能力（React-Native 和 Weex）。因为很多人是在学习 React 的过程中接触到的虚拟 DOM ，所以为先入为主，认为虚拟 DOM 和 JSX 密不可分。其实不然，虚拟 DOM 和 JSX 固然契合，但 JSX 只是虚拟 DOM 的充分不必要条件，Vue 即使使用模版，也能把虚拟 DOM 玩得风生水起，同时也有很多人通过 babel 在 Vue 中使用 JSX。
Virtual DOM 本质上JS和DOM之间的一个映射缓存。可以类比 CPU 和硬盘，既然硬盘这么慢，我们就在它们之间加个缓存：既然 DOM 这么慢，我们就在它们 JS 和 DOM 之间加个缓存。CPU（JS）只操作内存（Virtual DOM），最后的时候再把变更写入硬盘（DOM）。
“关注 前端开发社区 ，回复“ 1” 即可加入 前端技术交流群，回复 “ 2” 即可免费领取500G前端干货！
https://github.com/ayarami/examples-game-FishingCat
Vue和React的Render函数中都涉及到了Virtual DOM的概念，Virtual DOM也是性能优化上的重要一环，同时突破了直接操作真实DOM的瓶颈，本文带着以下几个问题来阐述Virtual DOM。
Vue3.x 改用 Proxy 替代 Object.defineProperty。因为 Proxy 可以直接监听对象和数组的变化，并且有多达 13 种拦截方法。
最近开源了一个 Vue 组件，还不够完善，欢迎大家来一起完善它，也希望大家能给个 star 支持一下，谢谢各位了。
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gbk"> <title>History和Location使用</title> </head> <body> <input type="button" value="返回" onclick="history.back();" /> </body> </html> DOM 解析模型，将文档加载到 内存，形成一个树形结构 <html> 就是根节点，每个标签会成为
浏览器加载一个页面时，是按照自上而下的顺序加载的，读取到一行就运行一行，如果将script标签写到页面上边，在代码执行的时候，页面还没有完全加载
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储
