vue基础

vue的特点

我们会从以下8个方面来对 Vue 进行分析：

• MVVM 框架
• 单页面应用程序
• 渐进式与兼容性
• 视图组件化
• 虚拟 DOM（Virtual DOM）

MVVM

所谓 MVVM 框架就是：View-ViewModel-Model，就像下面这样:

View相当于页面中的DOM，用来展示数据；
Model相当于一个数据源，是用来存储数据的；
View—Model是用来实现数据和试图的双向绑定；
这样就不需要手动的操作 DOM，所有对 DOM 操作都会通过监控者来完成。如果以前写过复杂的 DOM 操作的话（如 `parent().parent().parent()`），就会发现这种方式带来的便利。
Vue 正是使用了这种 MVVM 的框架形式，并且通过声明式渲染和响应式数据绑定的方式来帮助我们完全避免了对 DOM 的操作。

单页面应用程序

单页面应用程序（SPA），一般指为：一个页面就是一个应用（或子应用）。随着技术的发展，现在的前端网页早已不只局限于在浏览器上展示了，手机 App 上、微信公众号上都有了越来越多的展示机会。

而如果使用单页面的形式来开发的话，就不会出现这样一种情况。因为我们的整个应用就只有一个页面，当我们的这一个单页被加载进来之后，就不会在进行关于页面的网络请求。Vue 配合生态圈中的 Vue-Router 就可以非常方便的开发复杂的单页应用。

渐进式与兼容性

Vue 只做界面，而把其他的一切都交给了它的周边生态来做处理，这就要求 Vue 必须要对其他的框架拥有最大程度的兼容性。

例如，一开始只想做一个静态站，那么可以只引入 Vue 来去构建界面，过了一段时间，你想在网站上加入访问网络的功能，那么你可以再引入 axios（Vue 官方推荐）或者其他的（哪怕是 jQuery）网络请求框架，而后来随着你的网站越做越大，你想要把你的网站变成一个大型的 Web 应用的时候，可以引入一些其他你需要的 JS 文件，如 Loadsh.js、Velocity.js 等。

视图组件化

所谓视图组件化就是把我们的网页拆分为一个个的组件，就像下面这样：

Vue 允许通过组件来去拼装一个页面，每个组件都是一个可复用的 Vue 实例，组件里面可以包含自己的数据，视图和代码逻辑。

虚拟DOM

大家知道浏览器去处理 DOM 操作时，是存在性能问题的，这也是我们在使用 jQuery 或者原生 JavaScript 来去频繁操作 DOM 进行数据渲染的时候，我们的页面经常出现卡顿的原因。

而虚拟 DOM 则是预先通过 JavaScript 的各种运算，把最终需要生成的 DOM 计算出来，并且进行优化，在计算完成之后才会将计算出的 DOM 放到我们的 DOM 树中。由于这种操作的方式并没有进行真实的 DOM 操作，所以才会叫它虚拟 DOM。

Vue 是通过声明式渲染和响应式数据绑定的方式来帮助我们完全避免了对 DOM 的操作。不但避免了我们对 DOM 的复杂操作，并且大大的加快了我们应用的运行速度。