素材巴巴 > 程序开发 >

Vue中的虚拟DOM解析

程序开发 2023-09-15 22:20:56

1.什么是虚拟dom?

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

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

在这里插入图片描述

  1. 为什么需要虚拟dom?

    vue中,渲染视图会调用render函数,这种渲染不仅发生在组件创建时,同时发生在视图依赖的数据更新时。如果在渲染时,直接使用真实DOM,由于真实DOM的创建、更新、插入等操作会带来大量的性能损耗,从而就会极大的降低渲染效率。

    因此,vue在渲染时,使用虚拟dom来替代真实dom,主要为解决渲染效率的问题。

  2. 虚拟dom是如何转换为真实dom的?

    在一个组件实例首次被渲染时,它先生成虚拟dom树,然后根据虚拟dom树创建真实dom,并把真实dom挂载到页面中合适的位置,此时,每个虚拟dom便会对应一个真实的dom。

    如果一个组件受响应式数据变化的影响,需要重新渲染时,它仍然会重新调用render函数,创建出一个新的虚拟dom树,用新树和旧树对比,通过对比,vue会找到最小更新量,然后更新必要的真实dom节点

    这样一来,就保证了对真实dom达到最小的改动。

    在这里插入图片描述

  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显示结果为 "

{Vue中的虚拟DOM解析}

"

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

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

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


 //这些代码是为了我们写代码是方便,但是在真实运行的时候是不存在的
 

以上模板中的代码和下面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,]);},
 

标签:

素材巴巴 Copyright © 2013-2021 http://www.sucaibaba.com/. Some Rights Reserved. 备案号:备案中。