Vue渐进式，自底向上逐层应用、MVVM、声明式渲染的理解

Vue是什么

官方解释：Vue是一套用于构建用户界面的渐进式框架，Vue 被设计为可以自底向上逐层应用，Vue的核心是只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。

渐进式框架的理解

提供足够的选择，并且没有很多强制性的要求

渐进也可以理解为一步一步的意思，大概意思就是使用Vue的时候，并不需要把整个框架的所有东西都用上，可以根据实际情况选择你需要的部分。如下图：

14.png

声明式渲染和组建系统是Vue的核心库所包含内容，而客户端路由、状态管理、构建工具都有专门解决方案。这些解决方案相互独立，你可以在核心的基础上任意选用其他的部件，不一定要全部整合在一起。
Vue的使用没有很多强制性的要求,不像Angular那样，要使用Angular，还必须得使用它的模块机制、必须使用它的依赖注入、 必须使用它的特殊形式定义组件（这一点每个视图框架都有，Vue也难以避免）。

自底向上逐层应用

由基层开始做起，把基础的东西写好，再逐层往上添加效果和功能。

什么是MVVM

MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 Model 的双向数据绑定，这使得Model 的状态改变可以自动传递给 View，即所谓的数据双向绑定。
Vue.js 就是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性。Vue会通过DOM Listeners来监听并改变Model层的数据。反之，当Model层的数据发生改变时，也会通过Data Bingings来监听并改变View层的展示。从而实现双向数据绑定的功能。

声明式渲染

Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统.

直接上代码：

==代码1：==

<div id="app">
  {{ message }}
</div>

var vm = new Vue({
  el: '#app',//el:Vue需要操作的元素节点
  data: {
    message: 'Hello Vue!'
  }
})

运行页面：

1556417700797.png

通过‘el’绑定id为“app”的元素，实际上是将这个元素挂载在名为vm这个Vue实例上，实现数据和DOM的双向绑定，也就是说数据和DOM都是响应的了，想要验证是否是响应的并不难，打开你的浏览器的 JavaScript 控制台 (就在这个页面打开)，并修改 app.message 的值，你将看到上例相应地更新，

例如：

1556441509865.png

将app里面的message值改为123，页面也随之改变为123

1556442354985.png

看完这一大堆，还是不明白什么是声明式渲染，一头懵~

那声明式渲染到底是什么呢？其实理解声明式渲染最好的办法是对比命令式渲染，

命令式：一步一步告诉程序如何去做，能否达成结果取决于开发者的设计。
声明式：只告诉程序想要什么结果，如何达成由程序保证，开发者不用关心。

这时候回过来看上面的代码，app.message = "123"的操作只需要改Vue实例里的数据就可以了，页面上是如何根据这个数据渲染为123的我们并不关心。如果使用JQuery的话，我们需要获取到元素的id，然后通过操作dom的方式把数据赋值给app.innerHTML完成渲染，这些一步一步的过程都需要由我们开发人员来想，而声明式则不需要。