vue.js之虚拟 DOM

前端_学习之路

于 2025-02-12 16:20:22 发布

阅读量1k

点赞数 21

CC 4.0 BY-SA版权

分类专栏： Vue.js 文章标签： vue.js javascript 前端框架

本文链接：https://blog.youkuaiyun.com/wl_qianduan/article/details/145594490

Vue.js 专栏收录该内容

12 篇文章

订阅专栏

在 Vue.js 中，虚拟 DOM（Virtual DOM）是一个核心概念，它在提升应用性能和开发效率方面发挥着关键作用。下面将从定义、工作原理、优势以及在 Vue.js 中的具体应用等方面详细介绍 Vue.js 虚拟 DOM。

定义

虚拟 DOM 是一种轻量级的 JavaScript 对象，它是真实 DOM 的抽象表示。简单来说，虚拟 DOM 就是用 JavaScript 对象来模拟真实的 DOM 树结构，每个虚拟 DOM 节点对应一个真实的 DOM 节点。

工作原理

Vue.js 中虚拟 DOM 的工作流程主要分为以下几个步骤：

生成虚拟 DOM 树
当 Vue 实例创建时，Vue 会根据组件的模板和数据生成一个虚拟 DOM 树。这个过程会将模板中的 HTML 结构和动态数据结合起来，转换为 JavaScript 对象表示的虚拟 DOM 树。
数据变化触发更新
当组件的数据发生变化时，Vue 会根据新的数据生成一个新的虚拟 DOM 树。
对比新旧虚拟 DOM 树
Vue 使用一种叫做 “diff 算法” 的技术来对比新旧虚拟 DOM 树，找出它们之间的差异。diff 算法会尽可能高效地找出最小的更新范围，避免不必要的 DOM 操作。
更新真实 DOM
根据 diff 算法找出的差异，Vue 会将这些变化应用到真实的 DOM 上，从而更新页面显示。

优势

提高性能
直接操作真实 DOM 的代价比较高，因为每次操作都会引起浏览器的重排和重绘。而虚拟 DOM 通过 diff 算法可以批量计算出最小的 DOM 操作，减少了对真实 DOM 的直接操作次数，从而提高了性能。
跨平台
由于虚拟 DOM 是用 JavaScript 对象表示的，它不依赖于具体的平台和浏览器环境，因此可以很方便地实现跨平台渲染，比如在服务器端渲染（SSR）、原生应用开发（如 Vue Native）等场景中使用。
代码可维护性
虚拟 DOM 使得开发者可以使用声明式的方式来描述 UI，将关注点从复杂的 DOM 操作转移到数据和逻辑上，提高了代码的可维护性和可读性。
方便测试：
虚拟 DOM 是纯 JavaScript 对象，更容易进行单元测试和集成测试。

在 Vue.js 中的具体应用

模板编译

Vue 的模板会被编译成渲染函数，渲染函数返回虚拟 DOM 节点。例如：

<template>
  <div id="app">
    <h1>{{ message }}</h1>
  </div>
</template>
<script>
export default {
  data() {
    return {
      message: 'Hello, Vue!'
    };
  }
};
</script>

上述模板会被编译成类似以下的渲染函数：

function render() {
  return createElement('div', { id: 'app' }, [
    createElement('h1', this.message)
  ]);
}

其中 createElement 函数用于创建虚拟 DOM 节点。

响应式更新

当 data 中的 message 发生变化时，Vue 会重新调用渲染函数生成新的虚拟 DOM 树，然后通过 diff 算法对比新旧虚拟 DOM 树，最后更新真实 DOM。
示例代码
以下是一个简单的 Vue 组件示例，展示了虚拟 DOM 的基本应用：

html<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Vue Virtual DOM Example</title>
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
</head>
<body>
  <div id="app">
    <button @click="increment">增加计数器</button>
    <p>计数器: {{ count }}</p>
  </div>
  <script>
    new Vue({
      el: '#app',
      data: {
        count: 0
      },
      methods: {
        increment() {
          this.count++;
        }
      }
    });
  </script>
</body>
</html>