好似大家都在用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的代碼量就會少很多，操作也會更加簡便。