Vue与Angular的比较，Vue的单向数据流注意点

在学习vue之前，想必大家对于网页还是有一定的了解的，在性能方面，vue更能够让大家容易接受。这里我们先比较一下现在主流的开发工具。

现在主流的开发工具有：Vue、React、Angular等。

这里我们只比较Vue和Angular

Vue与Angular的比较：

在Vue中，有许多方法和Angular相似，这主要是因为Angular是Vue早期开发的灵感来源。然而，Augular中存在许多问题，在Vue中已经得到解决。

• 在API中
  Vue相比Angular更加的简练

• 在数据的绑定方面
  Vue的方法是在不同组件间使用了单项数据流(引用类型除外),很好的处理了主模块中的数据没有被污染。而Angular使用的是双向数据绑定

• 在性能方面
  在Vue方面，很容易就可以进行优化，因为它不需要使用到脏查询
  而Angular则不同，它使用到了脏查询，而随着我们使用的watcher使用的越多，就需要重新计算。如果watcher涉及到了其他的更新操作，那么脏查询可能就需要更多。更有可能使用到许多不常用的技术，让你去查询API文档，从这点上看我更喜欢Vuejs

好了，比较就到这里。现在开始介绍一下Vue的一些基础功能。

首先，我们需要使用到的是用一个简洁的模板来声明式的允许Vue将数据进行DOM渲染操作。

HTML:

<!-- Vue实例最外层 --><div id="app">    <!-- 和angularjs一样，使用{{}}包裹变量 -->    <h1>{{hello}}</h1></div>

JAVASCRIPT:

// 创建模板对应的实例var app = new Vue({    el : '#app',//el：elements Vue对应的根标签    data : {//对应的数据        hello : ' Hello Vue! '    }})

Vue中的方法大多与Angular中的相似，就像v-model和ng-model都是一样的双向数据绑定：

<div id="app2">    <!-- 使用v-model可以进行数据的双向绑定 -->    <input type="text" v-model="name">    <h1>{{name}}</h1></div>

//javascipt:var vm2 = new Vue({    el: '#app2',    data : {        name : 'xiaoming'    }})

在这里许多与Angular的方法我就不一一举例了，

我们现在来看一下什么是Vue的单向数据流：

在Vue中，向其他的实例传递数据的话需要使用到props，而props传入的值为布尔类型，数值类型或是字符类型等的话，在主数据中显示的依旧是起先传入的值。

但是，如果传入的是引用类型的话，那么主数据就会随着你这个实例中的值改变而改变。

这里要想讲清这个概念的话就必须要说道栈问题了，在浏览器中，如果你要使用引用类型以外的类型的话，浏览器会划分两个不同的区域，来承接其数据,而赋值时只会进行一次赋值操作，所以说如果我们在其赋值操作后给其中一个重新赋值，那么它们两个变量就不会相等。

var a = 10;var b = a;a = 20;console.log(b,a);//10,20

而引入类型则不同，它在浏览器划分区域时，如果两个变量指向的是同一个区域，所以它们的值进行了一个相等的赋值后，那么这两个的值一致相等。

var arr1 = [1,2,3,4,5];var arr2 = arr1;arr2.splice(1,1);console.log(arr1,arr2); //[1, 3, 4, 5] [1, 3, 4, 5]

所以说这里需要注意的一点。