Vue中的虚拟DOM解析

àì夳堔傛蜴生んèń 2022-10-16 09:53 221阅读 0赞

1.什么是虚拟dom？

虚拟dom本质上就是一个普通的JS对象，用于描述视图的界面结构

在vue中，每个组件都有一个`render`函数，每个`render`函数都会返回一个虚拟dom树，这也就意味着每个组件都对应一棵虚拟DOM树

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]

1.  为什么需要虚拟dom？
    
    在`vue`中，渲染视图会调用`render`函数，这种渲染不仅发生在组件创建时，同时发生在视图依赖的数据更新时。如果在渲染时，直接使用真实`DOM`，由于真实`DOM`的创建、更新、插入等操作会带来大量的性能损耗，从而就会极大的降低渲染效率。
    
    因此，`vue`在渲染时，使用虚拟dom来替代真实dom，主要为解决渲染效率的问题。
2.  虚拟dom是如何转换为真实dom的？
    
    在一个组件实例首次被渲染时，它先生成虚拟dom树，然后根据虚拟dom树创建真实dom，并把真实dom挂载到页面中合适的位置，此时，每个虚拟dom便会对应一个真实的dom。
    
    如果一个组件受响应式数据变化的影响，需要重新渲染时，它仍然会重新调用render函数，创建出一个新的虚拟dom树，用新树和旧树对比，通过对比，vue会找到最小更新量，然后更新必要的真实dom节点
    
    这样一来，就保证了对真实dom达到最小的改动。
    
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]
3.  模板和虚拟dom的关系
    
    vue框架中有一个`compile`模块，它主要负责将模板转换为`render`函数，而`render`函数调用后将得到虚拟dom。
    
    编译的过程分两步：
    
    1.  将模板字符串转换成为`AST`
    2.  将`AST`转换为`render`函数
    
    如果使用传统的引入方式，则编译时间发生在组件第一次加载时，这称之为运行时编译。
    
    如果是在`vue-cli`的默认配置下，编译发生在打包时，这称之为模板预编译。
    
    编译是一个极其耗费性能的操作，预编译可以有效的提高运行时的性能，而且，由于运行的时候已不需要编译，`vue-cli`在打包时会排除掉`vue`中的`compile`模块，以减少打包体积
    
    模板的存在，仅仅是为了让开发人员更加方便的书写界面代码
    
    **vue最终运行的时候，最终需要的是render函数，而不是模板，因此，模板中的各种语法，在虚拟dom中都是不存在的，它们都会变成虚拟dom的配置**（）

Vue里面 要是没有render函数，就找template配置

要是没有template，就找el，el要是没有那就什么都没有

el一般是ID选择器，先找到el里的选择器，例如 `el:"#app", var div = document.querySelector(#app); 通过div.outerHTML获取到template，div.outerHTML显示结果为 "<div id="app"><h1>{ {title}}</h1></div>"`

最后编译template，变成一个render函数。如果有render函数（每个render函数都会返回一个虚拟dom树），就不管其他的了，就执行render函数。

页面上要显示的东西取决于render函数返回的东西

模板和虚拟DOM的关系，模板是不会到我们运行过程中的，必须要变成render函数，这个过程叫做编译，模板最终是会被编译成render函数，我们使用传统js是在运行过程中编译的，但是我们使用vue-cli有个预编译，我们需要通过一些构建工具（vue-cli）转换代码（打包）变成浏览器看得懂的函数，这就叫预编译，打包过后已经变成render函数了

<template>
      <div id="app">
        <button @click="show = !show">toggle</button>
        <h1 v-if="show" @click="handleClick">hello VUE</h1>
      </div>
    </template>
    //这些代码是为了我们写代码是方便，但是在真实运行的时候是不存在的

以上模板中的代码和下面render中的虚拟dom是一样的效果

render(h) { 
        return h("div", {  attrs: {  id: "app" } }, [
          h(
            "button",
            { 
              on: { 
                click: () => { 
                  this.show = !this.show;
                },
              },
            },
            "toggle"
          ),
          this.show
            ? h("h1", {  on: {  click: this.handleClick } }, "hello vue")
            : undefined,
        ]);
      },

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20221014/7c35d134971c48d991296c74f6bff335.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]: /images/20221014/9caf9991481f49ca90256eabdfcaa29b.png