Vue的好用之处与其他框架的对比

Vue.js 很好，但相比 Angular 或 React 更好吗？

Vue.js 是一个用来构建网页界面的 JavaScript 库。同其它的一些工具结合在一起，它也可以成为一个新“框架”。你会了解到 Vue.js 是顶级的 JavaScript 框架之一，它在许多场景中可以被用来替换 Angular 和 React。这就引出了本文要讨论的话题 “Vue.js 是不错，但能比 Angular 或者 React 更好么?”

Vue.js 为什么比较特别?

• Vue 最大优势就是它比较新颖，没历史包袱，它吸取了 React 和 Angular 的教训
• Vue轻量级，易上手，易学习
• Vue更加灵活，（比起 Angular）更少专制
• 组件（Component）是 Vue最强大的功能之一。组件可以扩展 HTML 元素，封装可重用的代码

Angularjs vs Vue.js

Vue.js 更加灵活，（比起 Angular）更少专制，它能然你按照自己想要的方式构建应用，而非凡事非得 Angular 如此如此。它只不过是一层界面而已，因此你可以拿它作为页面中一个轻量的功能来使用

vue的双向邦定是基于ES5 中的 getter/setters来实现的,它的每个属性都有两个相对应的get和set方法，于是去网上查了查Angular.js双向绑定的实现原理，结果发现与vue完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。而Vue使用的发布订阅模式，是点对点的绑定数据。

它的每个属性都有两个相对应的get和set方法，我觉的这是多此一举的，于是去网上查了查Vue双向绑定的实现原理，才发现它和Angular.js双向绑定的实现原理完全不同，Angular是用的数据脏检测，当Model发生变化，会检测所有视图是否绑定了相关数据，再更改视图。而Vue使用的发布订阅模式，是点对点的绑定数据。vue则不需要。因此，vue在性能上更高效，但是代价是对于ie8以下ie8的浏览器无法支持。

脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更，来决定是否更新视图，最简单的方式就是通过 setInterval() 定时轮询检测数据变动，当然Google不会这么low，angular只有在指定的事件触发时进入脏值检测，大致如下：
DOM事件，譬如用户输入文本，点击按钮等。( ng-click )
XHR响应事件 ( http )
浏览器Location变更事件 (location )
Timer事件(timeout , interval )
执行 digest() 或 apply()

数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

Angularjs 拥有许多工具，而如此多的复杂语法有时也会让你感到迷惑。另外一方面，Vue.js 比起 Angular 要简单的多，甚至于要更好。

Reactjs vs Vue.js

React 和 Vue.js 拥有一些类似的功能特性，如:

1) 使用了一个虚拟 DOM
2) 提供了响应式的，并且可组合式的视图组件。
3) 保持对核心库的专注, 而像路由和全局状态管理这样的关注点则交给附带的库来处理

写一个Hello World

React 这样做:

Vue这样做：

这个很简单。使用一堆 script 标签就可以让代码跑起来。从这里可以看出，利用 Vue 的功能特性的好处就是无需学习任何新的技术。

双向数据绑定

React 这样做:

Vue 这样做:

Vue.js 中的双向数据绑定在你使用了v-model 时就会当的简单。而在 React 中, 过程就比较漫长了

Reactjs vs Vue.js 概要: 这些示例所要表明的意思就是 Vue.js 更容易学习，而且可以快速形成生产力。它还提供了一条途径，使用新的工具和模式来简化大型代码库的管理工作。Vue.js 会随着你知识的日渐丰富而不断扩展，因此你可以利用它来学习最新的工具以及进行最佳的实践。reactjs代码量最多，因为它既要管理UI逻辑，又要操心dom的渲染。

什么是数据绑定

数据绑定有单向数据绑定和双向数据绑定

单向数据绑定

指的是我们先把模板写好，然后把模板和后台数据整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。

单向数据绑定缺点：HTML代码一旦生成完以后，就没有办法再变了，如果有新的数据来了，那就必须把之前的HTML代码去掉，再重新把新的数据和模板一起整合后插入到文档流中。

双向数据绑定

数据模型（Module）和视图（View）之间的双向绑定。所谓的双向绑定，无非是从界面的操作能实时反映到数据，数据的变更能实时展现到界面。

用户在视图上的修改会自动同步到数据模型中去，同样的，如果数据模型中的值发生了变化，也会立刻同步到视图中去。

双向数据绑定的优点是无需进行和单向数据绑定的那些CRUD（Create，Retrieve，Update，Delete）操作
双向数据绑定最经常的应用场景就是表单了，这样当用户在前端页面完成输入后，不用任何操作，我们就已经拿到了用户的数据存放到数据模型中了。

VueJS 则使用 Object.defineProperty() 方法，监控对数据的操作，从而可以自动触发数据同步。并且，由于是在不同的数据上触发同步，可以精确的将变更发送给绑定的视图，而不是对所有的数据都执行一次检测。

在 Vue 中，都是通过在 HTML 中添加指令的方式，将视图元素与数据的绑定关系进行声明。例如：

 <form id="test">
   <input type="text" v-model="name">
 </form>

以上的 HTML 代码表示该 input 元素与 name 数据进行绑定。在 JS 代码中可以这样进行初始化：

var vm = new Vue({
  el: '#test',
  data: {
    name: 'luobo'
  }
})

通过这一系列的对比和这段学习的感受，还是感觉到vue的好用之处。。。