好似大家都在用vue，vue好在哪？

好似周围的人都在使用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的代码量就会少很多，操作也会更加简便。