遇见 Vue.js（一）【读记】

一、MVC模式是什么？

MVC框架最早出现在Java领域，然后慢慢在前端开发中也被提到，后来又出现了MVP，以及现在最成熟的MVVM，接下来我们来简单介绍一下各种模式。

1、MVC

MVC是应用最广泛的软件架构之一，一般MVC分为：Model（模型）、Controller（控制器）和View（视图）。这主要是基于分层的目的，让彼此的职责分开，如图1-1所示。

那么用户操作应该放在什么位置，MVC之间又会有什么变化，如图1-2所示。

用户（User）通过Controller来操作Model以达到View的变化。

1.2、MVP

MVP是从经典的MVC模式演变而来的，它们的基本思想有相通的地方：Controller/Presenter负责业务逻辑的处理，Model提供数据，View负责显示。

在MVP中，Presenter完全把View和Model进行了分离，主要的程序逻辑在Presenter里实现。而且，Presenter与具体的View是没有直接关联的，二十通过定义好的接口进行交互，从而使得在变更View的时候可以保持Presenter不变。MVP通信模式如图1-3所示。

1.3 MVVM

MVVM代表框架有：知名度相对偏低的Knockout、早期的Ember.js、目前比较火热的来自Google的AngularJS,以及我们今天要讲的Vue.js.

相比前面两种模式，MVVM只是把MVC的Controller和MVP的Presenter改成了ViewModel。View的变化会自动更新到ViewModel，ViewModel的变化也会自动同步到View上面显示。

这种自动同步是因为ViewModel中的属性实现了Observer，当属性变更时都能触发对应的操作，如图1-4所示。

二、Vue.js是什么？

Vue.js不是一个框架——它只聚焦视图层，是一个构件数据驱动的Web界面的库。Vue,js通过简单的API提供高效的数据绑定和灵活的组件系统。

先看看Vue.js的特性

1、确实轻量

除了MVP模式代表的Roit.js外，Vue.js已经算是前端库里体积非常小的，但不依赖其他基础库。

2、数据绑定

对于一些富交互、状态机类似的前端UI界面，数据绑定非常简单、方便。

3、指令

类似于AngularJS，可以用一些内置的简单指令（v-*），也可以自定义指令，通过对应表达式值的变化就可以修改对应的DOM。

4、插件化

Vue.js核心库不包含Router、AJAX、表单验证等功能，但是可以非常方便地加载对应的插件，后续章节我们会做完整的补充说明。

2.1、Vue.js与其他框架的区别

相信很多小伙伴们都了解过一些其他框架（比如AngularJS）的学习或者应用背景，本小节将以对比的方式来介绍各自的特点。

1、与AngularJS的区别

首先要提到的肯定是AngularJS，它来自Google，是国内目前比较火的前端框架之一，应用于PC类的复杂交互系统，我们内部也产出了一套基于它的PC UI组件库。那么两者到底有什么不同呢？

相同点：

• 都支持指令——内置指令和自定义指令。
• 都支持过滤器——内置过滤器和自定义过滤器。
• 都支持双向绑定。
• 都不支持低端浏览器（比如IE6/7/8）:
  • Vue.js使用比如Array.isArray的ES5特性。
  • AngularJS 1.3 开始不支持 IE8.

不同点：

• AngularJS的学习成本比较高，比如增加了Dependency Injection特性，而Vue.js本身提供的API都比较简单、直观。
• 在性能上，AngularJS依赖对数据做脏检查，所以Watcher越多越慢。Vue.js使用基于依赖追踪的观察并且使用异步队列更新，所有数据都是独立触发的。对于庞大的应用来说，这个优化差异还是比较明显的。

2、与React的区别

第二个要提到的就是React，来自FaceBook，在国内已经完全复制AngularJS的热潮，称为目前受关注度很高的前端框架。为了方便没有使用过React的同学理解，我们用React来编写一个Footer组件，代码示例如下：

<-- components.FooterView.jsx -->
/** @jsx React.DOM */
var FooterView = React.createClass({
    render: function() {
        <footer>
            <p>DDFE love Vue.js</p>
        </footer>
    }
});

相同点：

• React 采用特殊得JSX语法，Vue.js在组件开发中也推崇编写 .vue特殊文件格式，对文件内容都已一些约定，两者都需要编译后使用。
• 中心思想相同：一些都是组件，组件实例之间可以嵌套。
• 都提供合理钩子函数，可以让开发者定制化的去处理需求。
• 都不内置类似AJAX、Router等功能到核心包，而是以其他方式（插件）加载
• 在组件开发中都支持mixins的特性，具体内容在十一节中会进行介绍。

不同点：

• React依赖Virtual DOM，而Vue.js使用的DOM模板。React采用的Virtual DOM会对渲染出来的结果做脏检查。
• Vue.js 在模板中提供了指令、过滤器等，可以非常方便、快捷的操作DOM。
• 虽然在第18小节Vue.js2.0中也会提到支持Virtual DOM，但是两者还是有差异的。

2、如何使用Vue.js

上节我们通过一些重点框架的对比，了解了vue.js的一些特性和优势，下面我们简单的来实践一下。

1、安装

（1）CDN

如果项目直接通过script加载CDN文件，代码示例如下：

<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

（2）npm

$ npm install vue --save-dev

（3）bower

如果项目基于bower管理依赖，则可以使用bower来安装Vue，执行如下命令：

$ bower install vue --save-dev

2、第一个Hello World 程序

每一次学习新框架，都必然会经历程序员第一步Hello World程序，我们用Vue.js来输出一个微信内滴滴打车的WebApp首页Tab，代码示例如下：

<div id="didi-navigator">
    <ul>
        <li v-for="tab in tabs">
            {{ tab.text }}
        </li> 
    </ul>
</div>


new Vue({
    el: '#didi-navigator',
    data: {
        tabs: [
            {text: '巴士'},
            {text: '快车'},
            {text: '专车'},
            {text: '顺风车'},
            {text: '出租车'},
            {text: '代驾'}
        ]
    }
})

3、Vue.js的发展历史

Vue.js正式发布与2014年2月，对于目前的Vue.js:

• 在开发人数上，覆盖70多贡献者

• 在受关注度上，Github上拥有20000多star。

从脚手架、构建、插件化，到编辑器工具、浏览器插件等，基本涵盖了从开发到测试等多个环节。

Vue.js的发展里程碑如下:

• 2013年12月24日，发布0.7.0。
• 2014年1月27日，发布0.8.0。
• 2014年2月25日，发布0.9.0。
• 2014年3月24日，发布0.10.0。
• 2015年10月27日，正式发布1.0.0。
• 2016年4月27日。发布2.0的preview版本。

目前推荐使用比较稳定的2.9.6版本。

小伙伴们想要了解更多的话，可以加群技术交流一下哦：834223478