【Vue】为什么要使用vue_为什么要用vue

一、vue是什么

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。采用的是MVVM设计模式。

与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

二、vue的优点

• 体积小:压缩后只有33k。
• 运行效率：基于虚拟DOM。
  虚拟DOM是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术。
• 双向数据绑定（数据驱动）：让开发者不用再去操作DOM对象，把更多的精力投入到业务逻辑上
• 市场成熟：因为用的人特别的多，加上有大量的基于vue的UI库和前端组件。

三、什么是MVVM设计模式

MVVM（Model-View-ViewModel），它本质上是MVC的改进版，是针对MVC中的View进行了更细致的分工。

添加了ViewModel层，ViewModle将视图UI和业务逻辑分开，它可以取出Model的数据，同时帮助处理View中由于需要展示内容而设计到的业务逻辑。

---

优点：

1. 低耦合。视图（View）可以独立于Model变化和修改，一个ViewModel可以绑定到不同的"View"上，当View变化的时候Model可以不变，当Model变化的时候View也可以不变。

2. 可重用性。你可以把一些视图逻辑放在一个ViewModel里面，让很多view重用这段视图逻辑。

3. 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel），设计人员可以专注于页面设计。

4. 可测试。界面素来是比较难于测试的，测试可以针对ViewModel来写

---

MVVM的组成部分：

• 模型：指代表真实状态内容的领域模型（面向对象），或指代表内容的数据访问层（以数据为中心）。
• 视图：就像在MVC和MVP模式中一样，视图是用户在屏幕上看到的结构、布局和外观（UI）。
• 视图模型：视图模型是暴露公共属性和命令的视图的抽象。MVVM没有MVC模式的控制器，有的是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。
• 绑定器：声明性数据和命令绑定隐含在MVVM模式中。绑定器使开发人员免于被迫编写样板式逻辑来同步视图模型和视图。

四、什么是数据驱动（双向数据绑定）

数据模型和视图之间的双向绑定。

当数据发生变化的时候，视图也就发生变化，当视图发生变化的时候，数据也会跟着同步变化。
可以这样说用户在视图上的修改会自动同步到数据模型中去，数据模型也是同样的变化。

---

优点：
无需和单向数据绑定那样进行CRUD（Create，Retrieve，Update，Delete）操作，双向数据绑定最常应用在就表单上，这样当用户在前端页面完成输入后，用户不用任何操作，我们就已经拿到了用户输入好的数据，并放到数据模型中了。

五、什么是虚拟DOM

虚拟Dom可以看做一棵模拟了DOM树的JavaScript对象树。虚拟DOM其实就是一种模拟DOM的JavaScript数据结构。

---

工作原理（简述）：
虚拟DOM是用JS对象记录一个dom节点的副本，当dom发生更改时候，先用虚拟dom进行diff，算出最小差异，然后再修改真实dom。

在没有虚拟dom的时期，当dom发生更改时候，浏览器会从构建DOM树开始从头到尾执行一遍流程，效率很低。话句话上，即使原本没有发生改变的结构也会被重新的渲染一遍。

相比于传统的dom操作，虚拟dom的性能更加的好。

---

好处：

• 保证性能下限：参考上述的工作原理。
• 无需手动操作DOM：我们不再需要手动去操作 DOM，只需要写好 View-Model 的代码逻辑，框架会根据虚拟 DOM 和数据双向绑定，帮我们以可预期的方式更新视图，极大提高我们的开发效率。
• 跨平台：虚拟 DOM 本质上是 JavaScript 对象，与平台弱相关，而 DOM 与平台强相关。相比之下虚拟 DOM
  可以进行更方便地跨平台操作。

---

爱，或者被爱，都不如相爱，与知识相爱…