好似周围的人都在使用vue,那么vue到底好在哪呢,我虽然用了好多次,但是也是第一次停下来,整理了一下vue 的优点

  • 性能更好

  • 视图-模型分离,实现双向数据绑定

  • 维护成本低

1、性能好在哪?

在JavaScript中,操作DOM影响性能,操作DOM是十分昂贵的,因为访问DOM会消耗性能,而修改DOM可能导致重排或者重绘,代价更是可怖。

DOM是一个与语言无关的API,它在浏览器中的接口是用JavaScript实现的,在浏览器中,主要用于与HTML文档打交道,并且使用DOM API中的接口来访问文档中的数据,也就是说JS和DOM是两种东西,每次连接都需要消耗性能。

重排:当DOM的变化影响了元素的几何属性(宽和高),浏览器需要重新计算元素的几何属性,同样的其他的元素的几何属性和位置也可能受到影响。浏览器会使渲染树中受到影响的部分失效,并重新构造渲染树。这一过程叫做重排。

重绘:完成重排后,浏览器会重新绘制受影响的部分到屏幕中,这就是重绘。

发生重排的情况:

  • 添加或删除可见的DOM元素。

  • 元素位置改变

  • 元素尺寸改变( 外边距、内边距、边框厚度、宽度、高度等)

  • 内容改变,例:文本改变或图片被另一个不同尺寸的图片替代

  • 页面渲染器初始化

  • 浏览器窗口尺寸改变

浏览器的渲染过程

浏览器下载完页面中的所有组件:HTML、JavaScript、CSS、图片后,会发生这样的过程:

  1. 解析HTML,构建DOM树

  2. 解析CSS,生成CSS规则树

  3. 合并DOM树和CSS规则树,生成render树

  4. 布局render树,负责各元素尺寸、位置的计算

  5. 绘制render树,绘制页面像素信息

  6. 浏览器会将各层的信息发送给GPU,GPU将各层合成

那么,为什么vue的性能会更好呢?

vue的核心是虚拟dom,使用虚拟dom可以减少dom的操作,vue会检测出当前的vDom需要重绘和重排的位置,并分析出以最小的代价的方式作用到真实的DOM中,从而增加性能

虚拟dom:virtual dom (也被称为vdom),他是由JavaScript模拟出来的具有和真实DOM结构的树形结构。

<div id="container">
    <p class="title">文本标题</p>
    <p class="content">文本内容</p>
</div>

比如上面这段HTML模拟出来的虚拟DOM

在这里插入图片描述

2、什么是MVVM?

MVVM是Model-View-ViewModel,是把一个系统分为了模型(model)、视图(view)和view-model三个部分。

vue在MVVM架构下,view和model之间没有直接的联系,但是view和view-model、model和view-model之间时交互的,当view数据发生变化时,可以通过view-model同步到model中,model数据变化也会同步到view中。

在这里插入图片描述

这样一来,vue的代码量就会少很多,操作也会更加简便。

Logo

前往低代码交流专区

更多推荐