Vue 虚拟DOM的本质

最新推荐文章于 2024-07-31 16:33:32 发布

清灵xmf

最新推荐文章于 2024-07-31 16:33:32 发布

阅读量321

点赞数 2

分类专栏： vue 笔记文章标签： vue.js javascript 前端虚拟DOM

本文链接：https://blog.csdn.net/weixin_52648900/article/details/140804121

版权

vue 同时被 2 个专栏收录

5 篇文章 0 订阅

订阅专栏

笔记

5 篇文章 0 订阅

订阅专栏

1. DOM 的工作原理

在讨论虚拟 DOM 本质之前，先看一下 DOM 的工作原理。

我们开发编写的是 JS 代码，但浏览器引擎是 C++ 编写的，那浏览器是怎么处理 JS 代码呢？

通过 WebIDL，定义浏览器和 JS 之间的通信机制，也就是浏览器提供的一些功能如何被 JS调用。

WebIDL 具体见：https://developer.mozilla.org/zh-CN/docs/Glossary/WebIDL

简单来说：

1、WebIDL 定义接口类型

2、浏览器开发者使用 C++ 实现接口内容

3、WebIDL 编译器自动生成绑定代码（JS 到 C++的绑定），并将绑定代码注册到 JS 引擎里。

4、Web 开发者编写 JS 代码，普通的代码由 JS 引擎执行，若遇到 DOM 有关的操作，会将其识别为 API 调用，然后向浏览器底层（渲染引擎）发出请求，由渲染引擎负责执行，完成后向调用端返回一个结果。

平时我们所说的真实 DOM，就是浏览器底层已经调用过 C++ 对应的 API 返回的结果。

2. 虚拟DOM的本质

最初的虚拟 DOM 是由 React 团队提出的，理论上，无论使用什么结构，只要将文档的结构展示出来，这种结构就是虚拟 DOM，但实际上，只要 JS 对象适合。

在 Vue 中，存在一个渲染函数，该函数的调用结果就是返回虚拟 DOM。

<script setup lang="ts">
  import { h } from 'vue'
  const vNode = h('div', { class: 'bar', innerHTML: 'hello' });
  console.log(vNode, 'vNode')
</script>

所以我们经常说：虚拟 DOM 的本质就是普通 JS 对象。

3. 为什么使用虚拟DOM呢？

不论是使用虚拟 DOM 的方式还是其他方式，在初始化的时候性能差别不多，真正强大之处在于更新的时候。

举个例子🌰：

传统的 innerHTML 方式

<body>
  <button id="btn">点击</button>
  <div id="content"></div>
</body>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    const contentDiv = document.getElementById('content');
    const btn = document.getElementById('btn');
    let num = 1;
    btn.addEventListener('click', function () {
      contentDiv.innerHTML = `
          <div class="message">
            <div class="info">
              <span>数字</span>
              <span>${num++}</span>
            </div>
          </div>`;
    });
  });
</script>

虚拟 DOM 的方式

<script setup>
import { ref } from 'vue';
const num = ref(1);
function handleClick() {
  num.value++;
}
</script>

<template>
  <button @click="handleClick">点击</button>
  <div id="content">
    <div v-if="num > 0" class="message">
      <div class="info">
        <span>数字</span>
        <span>{{ num }}</span>
      </div>
    </div>
  </div>
</template>