您说的对

虚拟Dom的性能到底如何

2022/6/28 vuejs源码innerHTML虚拟Dom性能

命令式编程的性能要比声明式编程性能要高，因为虚拟Dom元素其实就是比对不同的地方 然后在重新渲染

# 命令式编程

假如说我们有一个盒子现在我们要给盒子的内容修改成别的内容
这是命令式编程的做法
  <body>
    <div>徐涛</div>
    <script>
      const div = document.querySelector("div");
            setTimeout(() => {
              div.innerHTML = "涛徐";
          }, 2000); 
    </script>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12

# 声明式编程

 <body>
    <div id="app">{{message}}</div>
    <script>
      const div = new Vue({
        el: "#app",
        data: {
          message: "徐涛",
        },
        mounted() {
          setTimeout(() => {
            this.message = "涛徐";
          }, 2000);
        },
      });
    </script>
  </body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

上面代码的意思就是 2s后把 徐涛 改成 涛徐

  1. 命令式编程更新性能的消耗 = 找出差异的性能消耗（这个就是虚拟dmo在对比） + 直接修改性能的消耗
  2. 声明式编程更新性能的消耗 = 直接修改性能的消耗
  3. 所以说如果我们能够最小化差异的性能消耗，就可以让声明式编程的性能无限接近命令式编程的性能。
  4. 虚拟dom的作用就是找出最小化差异这一步的性能消耗,在往简单的来说就是，让声明式编程的性能无限接近于命令式编程