Virtual DOM的实现原理

最新推荐文章于 2024-01-13 14:00:00 发布
最新推荐文章于 2024-01-13 14:00:00 发布
阅读量250 收藏
点赞数
分类专栏： Vue全家桶入门到精通 文章标签： 前端 vue.js javascript 面试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_73442777/article/details/130214740
版权

Virtual DOM的实现原理

课程目标

  • 了解什么是虚拟DOM,以及虚拟DOM的作用
  • Snabbdom的基本使用（Vue内部的虚拟Dom是改造了开源库Snabbdom）
  • Snabbdom的源码解析

在面试的时候经常会问到虚拟DOM是怎么工作的，通过查看Snabbdom源码，可以对这块内容有更加深入的了解。

1、什么是Virtual DOM

Virtual Dom(虚拟DOM),是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫做Virtual DOM.

我们为什么用虚拟DOM来模拟真实的DOM呢？

因为我们知道一个DOM对象中的成员是非常多。所以创建Dom对象的成本非常高。

如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少，成本也就低了。

2、为什么使用Virtual DOM

  • 手动操作Dom比较麻烦，还需要考虑浏览器兼容性问题，虽然有Jquery等库简化DOM操作，但是随着项目的复杂度越来越高，DOM操作复杂提升，既要考虑Dom操作，还要考虑数据的操作。

  • 为了简化DOM的复杂操作于是出现了各种的MVVM框架，MVVM框架解决了视图和状态的同步问题，也就是当数据发生变化，更新视图，当视图发生变化更新数据。

  • 为了简化视图的操作我们可以使用模板引擎，但是模板引擎没有解决跟踪状态变化的问题（当数据发生了变化后，无法获取上一次的状态，只有将页面上的元素删除，然后在重新创建，这时页面有刷新的问题，同时频繁操作Dom,性能也会非常低），于是Virtual Dom出现了。

  • Virtual Dom的好处就是当状态改变时不需要立即更新DOM，只需要创建一个虚拟树来描述DOM，Virtual Dom内部将弄清楚如何有效(diff)的更新DOM.(例如：向用户添加列表中添加一个用户，只添加新的内容，原有的结构会被重用)

    下面，我们看一段代码，该代码是使用jquery来实现的数据展示与排序，是纯DOM操作的方式

    <!DOCTYPE html>
<html>
<head>
  <title></title>
  <meta charset="utf-8">
  <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.3.js"></script>
</head>
<body>
  <div id="app">
  </div>
  <div id="sort" style="margin-top: 20px;">按年纪排序</div>
  <script type="text/javascript">
    var datas = [
      { 'name': 'kongzhi11', 'age': 32 },
      { 'name': 'kongzhi44', 'age': 29 },
      { 'name': 'kongzhi22', 'age': 31 },
      { 'name': 'kongzhi33', 'age': 30 }
    ];
    var render = function() {
      var html = '';
      datas.forEach(function(item, index) {
        html += `<li>
                  <div class="u-cls">
                    <span class="name">姓名:${item.name}</span>
                    <span class="age" style="margin-left:20px;">年龄:${item.age}</span>
                    <span class="closed">x</span>
                  </div>
                </li>`;
      });
      return html;
    };
    $("#app").html(render());
    $('#sort').on('click', function() {
      datas = datas.sort(function(a, b) {
        return a.age - b.age;
      });
      $('#app').html(render());
    })
  </script>
</body>
</html>

    如上demo排序，虽然在使用jquery时代这种方式是可行的，我们点击按钮，它就可以从小到大的排序，但是它比较暴力，它会将之前的dom全部删除，然后重新渲染新的dom节点，我们知道，操作DOM会影响页面的性能，并且有时候数据根本就没有发生改变，我们希望未更改的数据不需要重新渲染操作。

    因此虚拟DOM的思想就出来了，虚拟DOM的思想是先控制数据再到视图，但是数据状态是通过diff比对，它会比对新旧虚拟DOM节点，然后找出两者之前的不同，然后再把不同的节点再发生渲染操作。

    如下图所示：

在这里插入图片描述

  • 总结：

    虚拟DOM可以维护程序的状态，跟踪上一次的状态

    通过比较前后两次状态的差异来更新真实DOM

3、虚拟DOM的作用

维护视图和状态的关系（虚拟DOM会记录状态的变化，只需要更新状态变化的内容就可以了）

复杂视图情况下提升渲染性能。

下面我们看一个案例，该案例的功能比较简单，单击按钮后，更新div中的内容。

let div=document.querySelector('#app')
let btn=document.querySelectory('#btn')
btn.onclick=function(){
    div.textContent='Hello World'
}

以上代码非常简单，而且是使用DOM操作的方式来实现的。

如果上面的案例，我们使用虚拟DOM来实现，应该怎样处理呢？首先，我们要创建一个虚拟DOM的对象，

虚拟DOM对象就是一个普通的JS对象。当单击按钮的时候，需要对比两次状态的差异。所以说，仅仅是该案例，

我们使用虚拟DOM的方式来实现，要比使用纯DOM的方式来实现，性能要低。

所以说，并不是所有的情况下使用虚拟DOM都会提升性能的。只有在视图比较复杂的情况下使用虚拟DOM才会提升渲染的性能。

虚拟DOM除了渲染DOM以外，还可以实现渲染到其它的平台，例如可以实现服务端渲染(ssr),原生应用(React Native),小程序(uni-app等)。以上列举的案例中，内部都使用了虚拟DOM.

Vue中虚拟DOM生成真实DOM的过程

在这里插入图片描述

下面我们重点要讲解的就是一个开源的虚拟DOM库—Snabbdom.

从Vue2.x开始内部使用的虚拟DOM，就是改造的Snabbdom.

Snabbdom源码大约200行作用，可以通过模块来进行扩展，所以功能比较强大。

源码使用TypeScript开发，官方宣称是最块的Virtual Dom之一。

4、Snabbdom基本使用

4.1 创建项目

在讲解Snabbdom的基本使用之前，我们先来创建一个项目。

打包工具为了方便使用，使用了parcel,你也可以使用webpack.

下面创建项目，并安装parcel

//创建项目目录
md snabbdom-demo
// 进入项目目录
 cd snabbdom-demo
// 创建package.json
npm init -y
//本地安装parcel
npm install parcel-bundler

配置package.json中的scripts’

 "srcipts":{
     "dev":"parcel index.html --open" , //open打开浏览器
     "build"："parcel build index.html"
 }

创建目录结构

index.html
package.json
---src
    basicusage.js

4.2 导入Snabbdom

方法文档：

https://github.com/snabbdom/snabbdom

下面先安装Snabbdom.(这里最新版本有问题，可以先安装0.7.4)

npm install snabbdom@0.7.4

在项目的js文件夹下的01- basicusage.js文件中，添加如下代码：

import  snabbdom  from "snabbdom";
console.log(snabbdom);

以上代码的意思就是导入snabbdom这个包，然后打印其内容。

项目的启动

npm run dev

这时，开启的端口号为1234

http://localhost:1234

在打开的浏览器中，查看控制台的输出，发现输出的内容为undefined

为什么输出的是undefined呢?

这里我们需要查看对应的源码，

在node_modules/snabbdom/snabbdom.js文件中，

我们可以看到在整个文件中，并没有使用export default的方式进行导出，所以就不能使用import snabbdom这种方式进行导入。同时在，源码中，我们可以看到导出了三项内容分别为h,thunk,init.

所以，导入的代码修改成如下的形式

import { h, thunk, init } from "snabbdom";
console.log(h, thunk, init);

Snabbdom的核心仅提供最基本的功能，只导出了三个函数init(),h( ),thunk( )

init函数是高阶函数，返回patch( )，一会在看该方法

h函数返回虚拟节点VNode,这个函数我们在使用Vue.js的时候见过。

h()函数用于创建虚拟DOM，在Snabbdom中用VNode描述虚拟节点，也就是虚拟DOM。

new Vue({
router,
render:h=>h(App)
}).$mount('#app')

thunk函数是一种优化策略，可以在处理不可变数据时使用（用于优化复杂的视图）。

4.3 Snabbdom的基本使用

下面我们来看一下Snabbdom的基本使用，在01- basicusage.js文件中编写如下代码

import { h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "Hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);

运行上面的代码，可以在浏览器中看到Hello World.

可以查看对应生成的元素。

在这里插入图片描述

下面我们再来看一个问题，假如在某个时刻需要重新获取服务端的数据，并且将获取到的数据重新渲染到该div中(id='container'的div)。

我们这里，就需要重新创建一个VNode, 然后传递给patch,让patch比较一下新的VNode与原有的VNode之间的差异。

补充后的代码如下：

import { h, thunk, init } from "snabbdom";
// init方法返回值为patch函数，patch函数作用是对比两个vndoe的差异并更新到真实的DOM中。init函数的参数是一个数组，数组中的内容是模块，关于模块内容后面还会讲解
let patch = init([]);
//创建虚拟DOM
// 第一个参数：标签+选择器(id选择器或者是类选择器)
// 第二个参数：如果是字符串的话就是标签中的内容
let vnode = h("div#container.cls", "Hello World");
//我们这里需要将创建的虚拟dom，最终要渲染到`index.html`中`app`这个div中，所以这里需要获取一下该div
let app = document.querySelector("#app");
//要想将虚拟DOM渲染到`app`中，需要用到patch函数。
// 我们知道patch函数的作用是对比两个vnode的差异来更新到真实的`DOM`中。
//但是我们目前没有两个虚拟DOM.那么patch方法的第一个参数也可以是真实的DOM.patch方法会将真实的DOM转换成VNode.
// 第二个参数：为VNode
//返回值为VNode
let oldNode = patch(app, vnode);
vnode = h("div", "Hello Vue");
patch(oldNode, vnode);

在上面的代码中，我们又创建了一个虚拟DOM ,vnode。然后把这个vnode与oldNode进行对比，最后渲染到页面中。

下面我们在做一个案例：

在js目录下面在创建一个文件：02-basicusage.js

实现的代码如下：

// 本案例实现的要求是:在div中设置子元素h1，p
import { h, init } from "snabbdom";
let patch = init([]);
// h函数的第二个参数可以是一个数组，在该数组中添加所要创建的子元素。
let vnode = h("div#container", [
  h("h1", "hello world"),
  h("p", "这是一个p标签"),
]);
let app = document.querySelector("#app");
patch(app, vnode);

同时还需要修改index.html文件中的引入。

<body>
    <div id="app"></div>
    <script src="./js/02-basicusage.js"></script>
  </body>

这时，可以在浏览器中查看更新后的内容。

下面我们再来看另外一个问题，就是模拟从服务器获取数据，然后更新页面中的内容。

在上面的代码中，再增加如下的内容：

// 本案例实现的要求是:在div中设置子元素h1，p
import { h, init } from "snabbdom";
let patch = init([]);
// h函数的第二个参数可以是一个数组，在该数组中添加所要创建的子元素。
let vnode = h("div#container", [
  h("h1", "hello world"),
  h("p", "这是一个p标签"),
]);
let app = document.querySelector("#app");
// 记录更新后的VNode
let oldVnode = patch(app, vnode);
setTimeout(() => {
  vnode = h("div#container", [h("h1", "Hello Vue"), h("p", "Hello p")]);
  patch(oldVnode, vnode);
    
}, 2000);

在上面的代码中，首先记录第一次patch方法更新后的vnode,同时在2秒钟以后，通过h函数重新创建了一个虚拟DOM,并且通过patch函数与原有的虚拟DOM进行比较，然后重新更新页面内容。

2秒钟以后清空节点内容

  let a = patch(oldVnode, vnode);
  patch(a, h("!"));//第二个参数，表示创建一个注释节点。

4.4 模块

Snabbdom的核心库并不能处理元素的属性/样式/事件等，如果需要处理，可以使用模块.

常用模块

官方提供了6个模块

**attributes**:设置DOM元素的属性，内部使用setAttribute()来设置属性,处理布尔类型的属性（可以对布尔类型的属性作相应的判断处理，布尔类型的属性，我们比较熟悉的有selected,checked`等）。

props: 和attributes模块类似，设置DOM元素的属性element[attr]=value,不处理布尔类型的属性。

class: 切换样式类，注意：给元素设置类样式是通过sel选择器。··

dataset:设置 HTML5 中的 data-* 的自定义属性

eventlisteners: 注册和移除事件

style:设置行内样式，支持动画（内部创建transitionend事件）,会增加额外的属性：delayed / remove / destroy

下面看一下模块的使用

使用模块的步骤：

第一步：导入需要的模块

第二步：在init()中注册模块

第三步：使用h函数创建VNode的时候，可以把第二个参数设置为对象(对象中是模块需要的数据，可以设置行内样式、事件等)，其它参数往后移。

下面我们要实现的案例，就是给div添加一个背景，同时为其添加一个单击事件，当然在div中还要创建两个元素分别是h1与p.

具体实现的代码如下：

import { init, h } from "snabbdom";
//导入模块
import style from "snabbdom/modules/style";
import eventlisteners from "snabbdom/modules/eventlisteners";
//注册模块
let patch = init([style, eventlisteners]);
// 使用h函数的第二个参数传入模块所需要的数据(对象)
let vnode = h(
  "div",
  {
    style: {
      backgroundColor: "red",
    },
    on: {
      click: eventHandler,
    },
  },
  [h("h1", "Hello Vue"), h("p", "这是p标签")]
);
function eventHandler() {
  console.log("点击了我");
}
let app = document.querySelector("#app");
patch(app, vnode);

注意：在index.html文件中要引入以上代码所在的js文件，如下所示：

 <body>
    <div id="app"></div>
    <script src="./js/03-modules.js"></script>
  </body>

5、Snabbdom源码解读

通过前面的学习，我们可以总结出Snabbdom的核心：

  • 使用h( )函数创建JavaScript对象(VNode)描述真实DOM。

  • init( )函数设置模块，创建patch( )函数。

  • patch( )函数比较新旧两个VNode

  • 把变化的内容更新到真实DOM树上

5.1 h函数

h函数介绍

在使用Vue的时候加过h( )函数

new Vue({
   router,
   render:h=>h(App)
}).$mount('#app')

render函数的参数就是Snabbdom中的h函数，当然在Vue中将h函数做了一定的修改，可以用来支持组件，原有的Snabbdom中的h函数不支持组件的内容。在Snabbdom中h( )函数的作用就是用来创建VNode.

在看源码之前，我们先来了解一个概念：函数重载。

因为在源码中用到了函数重载。

所谓的函数重载: 参数个数或类型不同的函数，称之为函数重载

但是在JavaScript中没有重载的概念，在TypeScript中是有重载的。

我们来看一段重载的示例代码

function add(a,b){
    return a+b
}
function add(a,b,c){
    console.log(a+b+c)
}
add(1,2)
add(1,2,3)

以上我们是通过参数个数的形式，展示了一段函数重载的代码。

下面我们来看一下h函数的源码。

源码位置：node_modules/snabbdom/src/h.ts

// h函数的重载
export function h(sel: string): VNode;
export function h(sel: string, data: VNodeData): VNode;
export function h(sel: string, children: VNodeChildren): VNode;
export function h(sel: string, data: VNodeData, children: VNodeChildren): VNode;
//h函数重载的具体实现
//h函数可以接收三个参数，?表示该参数可以不传递
export function h(sel: any, b?: any, c?: any): VNode {
    //定义变量
  var data: VNodeData = {}, children: any, text: any, i: number;
    // 处理参数，实现重载的机制
    //如果c这个参数的值不等于undefined,表示传递了三个参数
  if (c !== undefined) {
      //如果该条件成立，表示处理的就是有三个参数的情况
      //参数b中存储的就是模块处理的时候，需要的数据，例如：行内样式，事件等，关于这块在前面的案例中我们也写过,在这里将b参数的值赋给了data这个变量
    data = b;
      //下面是对参数c进行了判断。
      //关于参数c有三种情况，第一种情况为数组，第二种情况为字符串或者是数字,第三种情况为VNode.
      //首先判断参数c是否为数组，如果是数组，赋值给了children这个变量,表明c是子元素。
      //例如前面我们在使用模块的案例中，给h函数指定的第三个参数就为数组：[h("h1", "Hello Vue"), h("p", "这是p标签")]
    if (is.array(c)) { children = c; }
      //如果c参数是字符串或者是数字，将参数c赋值给了text变量，表明传递过来的内容其实就是标签中的文本内容
      
    else if (is.primitive(c)) { text = c; }
      //如果有sel属性，表明c是vnode,在这里需要转换成数组的形式，然后再赋值给children这个变量
    else if (c && c.sel) { children = [c]; }
      
  } else if (b !== undefined) {
      //如果该条件成立，表明处理的是两个参数的情况
      //如果b是一个数组，赋值给chilren这个变量：vnode = h("div#container", [h("h1", "Hello Vue"), h("p", "Hello p")]);
    if (is.array(b)) { children = b; }
      //如果b是字符串或者数字：h("div", "Hello Vue");
    else if (is.primitive(b)) { text = b; }
      //如果b是Vnode的情况
    else if (b && b.sel) { children = [b]; }
    else { data = b; }
  }
    //判断children中有值
  if (children !== undefined) {
      //对chilren进行遍历
    for (i = 0; i < children.length; ++i) {
        //判断从chilren中取出来的内容是否为：string/number,如果是创建文本的虚拟节点.
      if (is.primitive(children[i])) children[i] = vnode(undefined, undefined, undefined, children[i], undefined);
    }
  }
  if (
    sel[0] === 's' && sel[1] === 'v' && sel[2] === 'g' &&
    (sel.length === 3 || sel[3] === '.' || sel[3] === '#')
  ) {
      //如果是svg，添加命名空间
    addNS(data, children, sel);
  }
    //最后返回的是整个VNode.所h函数的核心就是调用vnode方法，来返回一个虚拟节点
  return vnode(sel, data, children, text, undefined);
};
// 导出h函数
export default h;

addNs方法的实现如下：

function addNS(data: any, children: VNodes | undefined, sel: string | undefined): void {
  data.ns = 'http://www.w3.org/2000/svg';
  if (sel !== 'foreignObject' && children !== undefined) {
    for (let i = 0; i < children.length; ++i) {
      let childData = children[i].data;
      if (childData !== undefined) {
        addNS(childData, (children[i] as VNode).children as VNodes, children[i].sel);
      }
    }
  }
}

addNs方法中就是给data添加了命名空间，然后通过递归的方式给chilren中的所有子元素都添加了命名空间。

在看VNode这个方法的源码之前，我们先来说一下看源码必备的快捷键。

  • 光标移动到某个变量处，按F12快速定位到该变量的定义位置。
  • ALT + 左方向键，回到上次的代码位置
  • Ctrl + 单击，跳转到某个变量的定义处
  • 选中某个变量或方法名，按F12显示出该变量或方法的具体代码

5.2 VNode函数

在h函数的最后调用了VNode函数创建了一个虚拟节点，并返回。下面看一下VNode函数内部实现。

VNode函数的代码在vnode.ts文件中

import {Hooks} from './hooks';
import {AttachData} from './helpers/attachto'
import {VNodeStyle} from './modules/style'
import {On} from './modules/eventlisteners'
import {Attrs} from './modules/attributes'
import {Classes} from './modules/class'
import {Props} from './modules/props'
import {Dataset} from './modules/dataset'
import {Hero} from './modules/hero'

export type Key = string | number;

export interface VNode {
  sel: string | undefined;
  data: VNodeData | undefined;
  children: Array<VNode | string> | undefined;
  elm: Node | undefined;
  text: string | undefined;
  key: Key | undefined;
}

export interface VNodeData {
  props?: Props;
  attrs?: Attrs;
  class?: Classes;
  style?: VNodeStyle;
  dataset?: Dataset;
  on?: On;
  hero?: Hero;
  attachData?: AttachData;
  hook?: Hooks;
  key?: Key;
  ns?: string; // for SVGs
  fn?: () => VNode; // for thunks
  args?: Array<any>; // for thunks
  [key: string]: any; // for any other 3rd party module
}

export function vnode(sel: string | undefined,
                      data: any | undefined,
                      children: Array<VNode | string> | undefined,
                      text: string | undefined,
                      elm: Element | Text | undefined): VNode {
  let key = data === undefined ? undefined : data.key;
  return {sel, data, children, text, elm, key};
}

export default vnode;

在上面的代码中，我们首先关注的就是接口VNode,该接口中定义了很多的属性，而最终vnode这个函数返回的VNode对象必须都要实现该接口中的这些属性。

下面可以看一下这些属性的含义

export interface VNode {
    //选择器，也就是调用h函数的时候传递的第一个参数
  sel: string | undefined;
    // 节点数据：属性/样式/事件等。
  data: VNodeData | undefined;
    //子节点,和text互斥  VNode是描述真实DOM的，如果所描述的真实DOM中有子节点，通过children来表示这些子节点
  children: Array<VNode | string> | undefined;
    // 记录vnode对应的真是DOM，将Vnode转换成真实DOM以后，会存储到elm这个属性中。关于这一点可以在将VNode转换成真实DOM的时候看到。
  elm: Node | undefined;
    // 节点中的内容，和children只能互斥
  text: string | undefined;
    //优化，关于这个属性可以在将VNode转换成真实DOM的时候看到。
  key: Key | undefined;
}

最后看一下vnode这个函数，返回的就是一个js对象，该对象中包含了VNode这个接口中的属性，而这个js对象就行虚拟节点。而这个虚拟的节点是怎样转换成真实的DOM？后面会重点讲解这块内容。

5.3 复习h函数与Vnode函数应用

下面我们在通过一个案例，复习一下h函数与vnode函数。

假如，我们创建了如下的一个虚拟DOM

// 构造一个虚拟dom
var vnode = h('div#app',
  {style: {color: '#000'}},
  [
    h('span', {style: {fontWeight: 'bold'}}, "my name is zhangsan"),
    ' and xxxx',
    h('a', {props: {href: '/foo'}}, '我是张三')
  ]
);

下面看一下上面的代码的执行流程。

注意：这边先执行的是先内部的调用，然后再依次往外执行调用。

因此首先调用和执行的代码是：

第一步： h('span', {style: {fontWeight: 'bold'}}, "my name is kongzhi"), 因此把参数传递到h函数后：sel: 'span', b = {style: {fontWeight: 'bold'}}, c = "my name is kongzhi";

首先判断 if (c !== undefined) {} 代码，然后进入if语句内部代码，如下：

if (c !== undefined) {
  data = b;
  if (is.array(c)) { children = c; }
  else if (is.primitive(c)) { text = c; }
}

因此 data = {style: {fontWeight: 'bold'}}; 然后判断 c 是否是一个数组，可以看到，不是，因此进入 else if语句，因此 text = "my name is zhangsan"; 从代码中可以看到，就直接跳过所有的代码了，最后执行 return VNode(sel, data, children, text, undefined); 了，因此会调用 snabbdom/vnode.js 代码如下：

/*
 * VNode函数如下：主要的功能是构造VNode, 把输入的参数转化为Vnode
 * @param {sel} 'span'
 * @param {data} {style: {fontWeight: 'bold'}}
 * @param {children} undefined
 * @param {text} "my name is zhangsan"
 * @param {elm} undefined
*/
module.exports = function(sel, data, children, text, elm) {
  var key = data === undefined ? undefined : data.key;
  return {sel: sel, data: data, children: children,
          text: text, elm: elm, key: key};
};

因此 var key = data.key = undefined; 最后返回值如下：

{ 
  sel: 'span', 
  data: {style: {fontWeight: 'bold'}},
  children: undefined,
  text: "my name is kongzhi",
  elm: undefined,
  key: undefined
}

第二步：调用h('a', {props: {href: '/foo'}}, '我是张三');代码

同理：sel = 'a'; b = {props: {href: '/foo'}}, c = '我是张三'; 然后执行如下代码：

if (c !== undefined) {
  data = b;
  if (is.array(c)) { children = c; }
  else if (is.primitive(c)) { text = c; }
}

因此 data = {props: {href: '/foo'}}; text = '我是张三'; children = undefined; 最后也一样执行返回：

return VNode(sel, data, children, text, undefined);

因此又调用 snabbdom/vnode.js 代码如下：

/*
 * VNode函数如下：主要的功能是构造VNode, 把输入的参数转化为Vnode
 * @param {sel} 'a'
 * @param {data} {props: {href: '/foo'}}
 * @param {children} undefined
 * @param {text} "我是张三"
 * @param {elm} undefined
*/
module.exports = function(sel, data, children, text, elm) {
  var key = data === undefined ? undefined : data.key;
  return {sel: sel, data: data, children: children,
          text: text, elm: elm, key: key};
};

因此执行代码：var key = data.key = undefined; 最后返回值如下：

{
  sel: 'a',
  data: {props: {href: '/foo'}},
  children: undefined,
  text: "我是张三",
  elm: undefined,
  key: undefined
}

第三步调用外层的代码，把参数传递进去，因此代码初始化变成如下：

var vnode = h('div#app',
  {style: {color: '#000'}},
  [
    { 
      sel: 'span', 
      data: {style: {fontWeight: 'bold'}},
      children: undefined,
      text: "my name is zhangsan",
      elm: undefined,
      key: undefined
    },
    ' and xxxx',
    {
      sel: 'a',
      data: {props: {href: '/foo'}},
      children: undefined,
      text: "我是张三",
      elm: undefined,
      key: undefined
    }
  ]
);

继续把参数传递进去，因此 sel = 'div#app'; b = {style: {color: '#000'}}; c 的值变为如下：

c = [
  { 
    sel: 'span', 
    data: {style: {fontWeight: 'bold'}},
    children: undefined,
    text: "my name is 张三",
    elm: undefined,
    key: undefined
  },
  ' and xxxx',
  {
    sel: 'a',
    data: {props: {href: '/foo'}},
    children: undefined,
    text: "我是张三",
    elm: undefined,
    key: undefined
  }
];

首先看if判断语句，if (c !== undefined) {}; 因此会进入if语句内部代码;

if (c !== undefined) {
  data = b;
  if (is.array(c)) { children = c; }
  else if (is.primitive(c)) { text = c; }
}

因此 data = {style: {color: '#000'}}; c 是数组的话，就把c赋值给children; 因此 children 值为如下

children = [
  { 
    sel: 'span', 
    data: {style: {fontWeight: 'bold'}},
    children: undefined,
    text: "my name is zhangsan",
    elm: undefined,
    key: undefined
  },
  ' and xxxx',
  {
    sel: 'a',
    data: {props: {href: '/foo'}},
    children: undefined,
    text: "我是张三",
    elm: undefined,
    key: undefined
  }
];

我们下面接着看 如下代码：

if (is.array(children)) {
  for (i = 0; i < children.length; ++i) {
    if (is.primitive(children[i])) children[i] = VNode(undefined, undefined, undefined, children[i]);
  }
}

如上代码，判断如果 children 是一个数组的话，就循环该数组 children; 从上面我们知道 children 长度为3，因此会循环3次。进入for循环内部。判断其中一项是否是数字和字符串类型，因此只有 ' and xxxx' 符合要求，因此 children[1] = VNode(undefined, undefined, undefined, ' and xxxx'); 最后会调用 snabbdom/vnode.js 代码如下：

module.exports = function(sel, data, children, text, elm) {
  var key = data === undefined ? undefined : data.key;
  return {sel: sel, data: data, children: children,
          text: text, elm: elm, key: key};
};

通过上面的代码可知，我们最后返回的是如下：

children[1] = {
  sel: undefined,
  data: undefined,
  children: undefined,
  text: ' and xxxx',
  elm: undefined,
  key: undefined
};

执行完成后，我们最后返回代码：return VNode(sel, data, children, text, undefined); 因此会继续调用snabbdom/vnode.js代码如下：

/*
 @param {sel} 'div#app'
 @param {data} {style: {color: '#000'}}
 @param {children} 值变为如下：
 children = [
    { 
      sel: 'span', 
      data: {style: {fontWeight: 'bold'}},
      children: undefined,
      text: "my name is zhangsan",
      elm: undefined,
      key: undefined
    },
    {
      sel: undefined,
      data: undefined,
      children: undefined,
      text: ' and xxxx',
      elm: undefined,
      key: undefined
    },
    {
      sel: 'a',
      data: {props: {href: '/foo'}},
      children: undefined,
      text: "我是张三",
      elm: undefined,
      key: undefined
    }
 ];
 @param {text} undefined
 @param {elm} undefined
*/
module.exports = function(sel, data, children, text, elm) {
  var key = data === undefined ? undefined : data.key;
  return {sel: sel, data: data, children: children,
          text: text, elm: elm, key: key};
};

因此继续执行内部代码：var key = undefined; 最后返回代码：

return {
  sel: sel, 
  data: data, 
  children: children,
  text: text, 
  elm: elm, 
  key: key
};

因此最后构造一个虚拟dom返回的值为如下：

vnode = {
  sel: 'div#app',
  data: {style: {color: '#000'}},
  children: [
    { 
      sel: 'span', 
      data: {style: {fontWeight: 'bold'}},
      children: undefined,
      text: "my name is zhangsan",
      elm: undefined,
      key: undefined
    },
    {
      sel: undefined,
      data: undefined,
      children: undefined,
      text: ' and xxxx',
      elm: undefined,
      key: undefined
    },
    {
      sel: 'a',
      data: {props: {href: '/foo'}},
      children: undefined,
      text: "我是张三",
      elm: undefined,
      key: undefined
    }
  ],
  text: undefined,
  elm: undefined,
  key: undefined
}

接着往下执行如下代码：

// 初始化容器
var app = document.getElementById('app');

// 将vnode patch 到 app 中
patch(app, vnode);

以上就是生成整个虚拟DOM的过程。

ned; `最后返回代码：

return {
  sel: sel, 
  data: data, 
  children: children,
  text: text, 
  elm: elm, 
  key: key
};

因此最后构造一个虚拟dom返回的值为如下：

vnode = {
  sel: 'div#app',
  data: {style: {color: '#000'}},
  children: [
    { 
      sel: 'span', 
      data: {style: {fontWeight: 'bold'}},
      children: undefined,
      text: "my name is zhangsan",
      elm: undefined,
      key: undefined
    },
    {
      sel: undefined,
      data: undefined,
      children: undefined,
      text: ' and xxxx',
      elm: undefined,
      key: undefined
    },
    {
      sel: 'a',
      data: {props: {href: '/foo'}},
      children: undefined,
      text: "我是张三",
      elm: undefined,
      key: undefined
    }
  ],
  text: undefined,
  elm: undefined,
  key: undefined
}

接着往下执行如下代码：

// 初始化容器
var app = document.getElementById('app');

// 将vnode patch 到 app 中
patch(app, vnode);

以上就是生成整个虚拟DOM的过程。

碧桂园五星上将
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【前端学习 Vue - （11）虚拟 DOM 实现原理】
weixin_60364883的博客
09-07 1931
虚拟 DOM 实现原理
虚拟dom (virtual dom)(vnode)
热门推荐
yiyueqinghui的博客
04-12 2万+
1,虚拟DOM的逻辑（React虚拟dom到真实dom发生了什么） 2，React16 更新了什么 React16中引入了Fiber这个概念，从根本上解决了由于js的单线程运行，遇到计算量较大的情况，导致动画和交互卡顿的问题。 Fiber的核心是实现了一个基于优先级和requestIdleCallback的循环任务调度算法 。它可以把一个任务拆分成多个小任务，并且可随时中止或恢复任务，同时也可以...
虚拟DOM的实现原理【1-4】
qq_37833745的博客
09-24 1284
1: 什么是虚拟DOM 虚拟DOM：是由普通 JS 对象 来描述 DOM 对象 2: 为什么要虚拟DOM？ 手动操作 DOM 比较麻烦，还需要考虑浏览器兼容性问题，虽然有 JQuery 等库简化 DOM 操作 ，但是随着项目的复杂，DOM 操作复杂提升，比较前端开发刀耕火种的年代 为了简化 DOM 的复杂操作，于是出现了各种 MVVM框架，MVVM 框架解决了 视图 和 状态同步问题 为了简化视图的操作，可以使用模版引擎，但是模版引擎没有解决跟踪状态变化的问题，于是虚拟...
virtual Dom 全面理解虚拟Dom
qq_34185872的博客
04-23 816
当数据发生变化时，Virtual DOM 会重新渲染整个视图，并与旧的 Virtual DOM 进行比较以找出真正需要更新的部分，从而最小化了 DOM 操作的数量和浏览器的重绘次数，提高了应用程序的性能和响应速度。因此，对于这些框架的开发者和使用者来说，了解 Virtual DOM 是至关重要的。支持跨平台开发：由于 Virtual DOM 是一个独立于浏览器的抽象层，因此 Vue 可以通过不同的渲染引擎（如浏览器、Node.js、Weex 等）来渲染组件，支持跨多个平台的开发。
什么是虚拟dom？如何实现一个虚拟dom？
huangyuting98的博客
02-26 169
什么是虚拟dom？如何实现一个虚拟dom？
Vue实现virtual-dom的原理简析
08-30
主要介绍了Vue实现virtual-dom的原理简析，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
04.任务四：Virtual DOM 的实现原理
02-05
04.任务四：Virtual DOM 的实现原理
val：VirtualDOM抽象层-通过使用类似React和Preact之类的Hyperscript类API的任何虚拟DOM库，为您提供更好的集成和对DOM的完全控制
02-24
这包括但不限于： React事前虚拟DOM 超级脚本（任何实现） 真实DOM ...npm install @skatejs/val基本原理这些不同实现所面临的问题是，唯一的共同点是您在顶层调用的函数及其接受的参数。 但是，它们的行为与您提供...
hairball:用纯ClojureScript编写的虚拟DOM差异。 还没有另一个React.js包装器
04-29
hairball-纯ClojureScript中的虚拟DOM实现这不是一个React.js包装器，它是一种类似UI渲染方法的纯ClojureScript实现。 顺便说一下，与大多数ClojureScript React.js包装器相比，它以更少的代码行实现。 直截了当的...
虚拟DOM的原理
qq_57002161的博客
01-22 2311
虚拟DOM（Virtual DOM）是一个轻量级的javascript对象，它最初只是 真实DOM（real DOM） 的一个副本，并不是完全拥有真实DOM的所有属性以及方法，它是一个节点树，它将元素、属性和内容作为对象以及属性，vue/react的渲染函数从组件里创建一个节点树，然后响应数据的变化来更新这个节点树，这个变化是用户或者系统完成的动作引起的。 虚拟DOM工作三个重要步骤 1、底层数据发生变化时，整个ui都将在虚拟DOM中重新渲染。 2、计算之前DOM和更改数据的虚拟DOM之间不一样。
vue虚拟DOM原理了解
丑小鸭变黑天鹅的博客
05-24 5905
vue虚拟DOM原理了解一、什么是虚拟DOM？二、为什么要使用虚拟 DOM？三、虚拟DOM的作用四、虚拟DOM的实现原理1、snabbdom2、snabbdom模块3、snabbdom源码概述4、Snabbdom 源码实现 一、什么是虚拟DOM？ 虚拟 DOM(Virtual DOM) 是由普通的 JavaScript 对象来描述 DOM对象 状态的变化首先作用于虚拟 DOM，最终映射到真实的DOM中 Vue.js2.x内部使用的虚拟 DOM是改造的Snabbdom 二、为什么要使用虚拟 DOM？ 虚
前端入门到弃坑:虚拟dom的实现原理
qq_41632427的博客
08-25 1156
虚拟
四、Virtual DOM的实现原理-核心内容精讲
qq_41994396的博客
05-08 110
Virtual Dom(虚拟DOM),是由普通的JS对象来描述DOM对象，因为不是真实的DOM对象，所以叫做我们为什么用虚拟DOM来模拟真实的DOM呢？因为我们知道一个DOM对象中的成员是非常多。所以创建Dom对象的成本非常高。如果使用虚拟Dom来描述真实Dom,就会发现创建的成员少，成本也就低了。
Virtual Dom（虚拟DOM）
陈开心的博客
09-29 877
virtual dom （虚拟DOM）简称 vdom 是Vue和React的核心部分。vdom是比较独立的部分，它是用JS来模拟dom结构，dom变化的对比放在js层来做（图灵完备语言），这样可以提高重绘性能。 图灵完备语言要求能实现各种复杂逻辑，能做到判断，循环，递归，能实现无线循环无限执行，能实现任何数据算法的语言。在前端语言（html , css , js）中 ，只有js是图灵完备的语言...
详解虚拟DOM及实现过程
划水队员的博客
08-31 2398
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、虚拟DOM是什么？二、为什么需要虚拟DOM1.引入库2.读入数据三、如何实现总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、虚拟DOM是什么？ 虚拟DOM通过JavaScript来模拟了一个真实的DOM树，其中包含了真实DOM树中的结构信息 二
深入理解虚拟DOM：原理、优势与实践
最新发布
球球不吃虾WHR2349博客
01-13 1187
虚拟DOM（Virtual DOM）是一个编程概念，它是对真实DOM（Document Object Model）内存中的抽象表示。虚拟DOM本身并不是一个真实的DOM节点，而是一个轻量级的JavaScript对象，它模拟了真实DOM树的结构和属性。开发者通过操作虚拟DOM，可以间接地更新真实DOM，而不需要直接进行频繁的DOM操作，从而提高Web应用的性能。自定义虚拟DOM实现是一个有趣但具有挑战性的任务。
Virtual Dom（虚拟Dom）
BobbleHat的博客
11-11 326
1
虚拟DOM
小王的博客
08-24 1387
虚拟DOM相关知识
vue组件化实现原理
09-14
Vue的组件化实现原理基于Vue的核心概念——虚拟DOM（Virtual DOM）。组件化是指将页面拆分为多个独立、可复用的组件，每个组件都有自己的模板、样式和行为。Vue通过提供组件系统来支持这种开发方式。 在Vue中，我们...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值