Vue应用程序开发
上QQ阅读APP看书，第一时间看更新
上一章目录下一章

1.1 初识Vue.js

Vue.js是目前比较热门的前端框架之一，具有易用、灵活、高效等特点。Vue.js的目标是通过尽可能简单的API实现双向数据绑定和组合。下面来认识一下Vue.js。

1.1.1 什么是Vue.js

Vue（读音/vjuː/，类似于view）是一套用于构建用户界面的渐进式框架。与其他大型框架不同的是，Vue被设计为可以自底向上逐层应用。Vue的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。此外，当与现代化的工具链以及各种支持类库结合使用时，Vue也完全能够为复杂的单页应用提供驱动。

渐进式框架的优点是灵活、易用和高效。Vue.js颠覆了传统前端开发模式，提供了现代Web开发中常见的高级功能。

1.1.2 为什么要使用Vue.js

Vue.js是一个优秀的前端开发框架，它之所以受前端开发人员的青睐，主要是因为它具有很多突出的优点，颠覆了传统的前端开发模式。Vue.js通过模型-视图-视图模型（Model-View-ViewModel，MVVM）思想实现数据的双向绑定，让开发者不用频繁操作DOM对象，有更多的时间去思考业务逻辑。下面通过两段代码来比较传统开发模式和使用Vue.js开发的不同，代码如下。

<div id="output"></div>
        <button id="increment">点击自增</button> 
        <script type="text/javascript"> 
             var counter = 0; 
             $(document).ready(function() { 
                  var $output = $('#output'); 
                  $('#increment').click(function() { 
                       counter++; 
                       $output.html(counter); 
                  }); 
                  $output.html(counter); 
             }); 
        </script>

上面这段代码直接操作DOM元素，通过事件机制来响应用户交互操作，使得视图代码和业务逻辑耦合在一起。随着功能的不断增加，代码会越来越难以维护。

<div id="app">
            <div>{{ counter}}</div> 
            <button v-on:click="increment">点击自增 </button> 
        </div> 
        <script type="text/javascript"> 
             new Vue({ 
                  el: '#app', 
                  data: { 
                       counter: 0 
                  }, 
                  methods: { 
                       increment: function() { 
                            this.counter++; 
                  } 
                } 
             }); 
        </script>

Vue.js通过MVVM模式将代码拆分为视图与数据两部分，开发者只需要关心数据即可，视图部分会根据数据的变化自动响应与更新。

通过比较可以发现，使用jQuery需要频繁地操作DOM元素去更新视图，而使用Vue.js时只需关心数据，更新DOM由Vue来完成，这就是Vue.js的数据双向绑定的特点。数据双向绑定是Vue.js的核心，它采用简洁的模板语法将数据渲染到视图中。

当然，除了数据双向绑定特点之外，Vue.js还具有以下主要特点。

1.轻量高效

Vue.js压缩后只有几十千字节，它通过简洁的API提供高效的数据绑定和灵活的组件系统。

2.组件化开发

通过模块封装，Vue.js可以对一个Web开发中设计的各种模块进行拆分，使其变成单独的组件，并通过数据绑定来调用对应的组件，同时传入参数，完成对整个项目的开发。

3.前端路由

Vue-Router是Vue.js官方的路由管理器，它和Vue.js框架的核心深度集成于一体，可以非常方便地用于单页面应用程序的开发。路由用于设定访问路径，根据路径的不同，驱动不同的组件，实现单页面的展示。

4.状态管理

Vuex是一个专为Vue.js应用程序开发的状态管理模式，负责把需要共享的变量或数据全部存储在一个对象中，供其他组件使用。它集中地存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

5.虚拟DOM

虚拟DOM就是一种可以预先通过JavaScript进行各种计算，把最终的DOM操作计算出来并优化的技术。由于此DOM操作属于预处理操作，并没有真实的操作DOM，所以又称为虚拟DOM。计算完毕后，虚拟DOM才会真正地将DOM操作提交，将DOM操作变化反映到DOM树上。虚拟DOM是React引入的思想，用来解决浏览器的性能问题。

1.1.3 MVVM模式

前面的实例中提到Vue.js在设计上使用了MVVM模式。MVVM本质上是模型-视图控制器（Model-View-Controller，MVC）的改进版。MVVM模式使用的是数据绑定基础架构，它可以轻松构建视图用户界面（User Interface，UI）的必要元素。ViewModel负责取出Model数据的同时帮忙处理视图（View）中由于需要展示内容而涉及的业务逻辑。MVVM没有MVC模式的控制器，也没有模型-视图-展示器（Model-View-Presenter，MVP）模式的展现器，有的只是一个绑定器。在视图模型中，绑定器在视图和数据绑定器之间进行通信。开发人员只需在HTML上编写一些绑定器，利用一些指令绑定，采用数据双向绑定模式，视图的变化就会自动更新到ViewModel中，ViewModel的变化也会自动同步到视图中进行显示。MVVM模式实现了视图和数据的分离、UI设计与业务逻辑的分离，大大减少了烦琐的DOM操作。MVVM代表框架有Vue.js、React.js、Angular.js和Ember.js。

Model：MVVM中的Model简写为M。Model代表整个Web项目所需要的数据模型，Model含有大量信息，但它并不具有任何行为逻辑，它只是数据，因而它不会影响浏览器如何展示数据。

View：在MVC中，View是不能自己改变的，通常由控制器操作DOM来改变View。而在MVVM中，View是具有主动性的，因为它包括了一些数据绑定、事件和行为，这些都会直接影响Model和ViewModel。View不但负责自身的展示，而且会将自身的变化同步到ViewModel中。

ViewModel：MVVM中的VM可以被看作MVC中的控制器，VM主要负责用一定的业务逻辑对数据进行改变或转换，也负责将Model的变化反映到View上，而当View自身有变化时，也会同步Model进行改变。经典的MVVM模型如图1-1所示。

从图1-1中可以看出以下内容。

（1）Model与ViewModel之间的双向关系。

①Model可以通过Ajax通信，发送数据给ViewModel。

图1-1 经典的MVVM模型

②ViewModel也可以通过Ajax通信，发送请求给Model。

（2）ViewModel与View之间的双向关系。

①ViewModel中数据的改变可以同时改变View上的显示内容。

②View上显示内容的改变可以同时改变ViewModel中对应的数据。

上一章目录下一章