浅谈vue 2.0中的虚拟dom概念

xiaoxiao2025-10-15  7

浅谈vue 2.0中的虚拟dom概念

概要主要内容虚拟DOM实现

概要

作者一直很在意new Vue({ router, render: h => h(App) }).$mount('#app');中render函数的用意,一开始以为只是单纯的把dom树渲染上去,但去官网查阅巩固后,发现虚拟DOM的用意。其实我们平时写的组件也是以虚拟dom的形式渲染上你的网页的。首先,我们知道原生的js中,无限延伸地使用getElementById、createElement之类的方法来操作DOM的,但每一次在DOM上的操作,都是一次繁杂的内在过程,浏览器要对DOM操作进行详细的解析,从而造成了性能的浪费。 那么虚拟DOM是如何做的呢?

主要内容

这是一个html dom树,dom操作都要对其中的元素节点甚至属性节点和文本节点进行操作,这无疑带来了巨大的性能耗费。 而vue virtual-dom的做法

用createElement创建一个虚拟DOM,然后用render函数把虚拟DOM树渲染在其中真的得DOM上,用一个Watcher监听器监听DOM中数据的变化,他包含着哪些信息发生了改变,然后在dom文档上相应得做出改变,在dom上重新渲染,从而减少了大量的dom操作。

虚拟DOM实现

其实虚拟DOM就是用js完成本来在html上的元素创建,所以我们本来所编写的组件,也是一种虚拟dom的形式,如template:‘<h1>virtual dom</h1>’本身就是一个虚拟dom实现 另外一种就是render渲染函数了

转载请注明原文地址: https://www.6miu.com/read-5037988.html

最新回复(0)