这是我参与「第五届青训营」伴学笔记创作活动的第7天

前言

什么是vue.js？ vue就是一个js库，并且无依赖别的js库，直接引入一个js文件就可以使用，与传统JS和JQuery框架不同，Vue的渐进式框架表示开发者可以由简单组件写起，渐渐搭建出一个复杂的前端平台。
为什么学vue？ vue的学习相对其他框架曲线平缓，api简洁，更容易上手，适合入门前端时学习。

Vue的核心

形成Vue渐进式框架的核心有为：组件化，MVVM，响应式虚拟DOM。

1.组件化

Vue将组成一个页面的HTML，CSS和JS合并到一个组件中，可以被其他组件或页面引入而重复利用。通常每个.Vue文件作为一个组件导出，组件可以作为基础组件（如按钮）或一个页面（如登录页面）。组件化很好的将一个庞大复杂的前端工程拆分为一个个组件，重复利用的性质也大大提高了开发的效率。

2.MVVM

MVVM是什么

mvvm是 Model-View-ViewModel 的缩写，即模型-视图-视图模型。 Model：数据模型，后端传递的数据。(data，props，computed等部分）
View：代表 UI 组件，它负责将数据模型转化成 UI 展现出来。（template部分）
ViewModel：是一个同步View 和 Model的对象。MVVM模式的核心，它是连接Model和View的桥梁。

为什么需要MVVM

开发者在代码中大量调用相同的DOM API，代码复杂，也导致其难以维护。并且随着Model的频繁变化，开发者需要主动更新到View中，工作过于繁琐。JQuery虽然解决了操作DOM过于繁琐的问题，其他各种问题却始终伴随前端。

MVVM的工作原理

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互，Model 和 ViewModel 之间的交互是双向的，称之为双向绑定。

3.响应式虚拟DOM

什么是虚拟DOM

从本质来说，虚拟DOM是一个JavaScript对象，通过对象的方式来表示DOM结构。

为什么用虚拟DOM

对于DOM来说，当HTML的一个元素（如div）需要响应数据更改时，会刷新整个页面，导致效率堪忧。而虚拟DOM将页面的状态抽象为JS对象的形式，配合不同的渲染工具，使跨平台渲染成为可能。通过事务处理机制，将多次DOM修改的结果一次性更新到页面上，从而有效的减少页面渲染的次数，减少修改DOM的重绘重排次数，提高渲染性能。 Vue的优点

Vue的特点

遵循MVVM模式
编码简洁，体积小，运行效率高，适合移动/PC端开发
它本身只关注UI，可以引入其它第三方库开发项目

前端入门之Vue.js——了解Vue.js | 青训营笔记

前言