Vue与Angular的比较,Vue的单向数据流注意点
在学习vue之前,想必大家对于网页还是有一定的了解的,在性能方面,vue更能够让大家容易接受。这里我们先比较一下现在主流的开发工具。现在主流的开发工具有:Vue、React、Angular等。这里我们只比较Vue和AngularVue与Angular的比较:在Vue中,有许多方法和Angular相似,这主要是因为Angular是Vue早期开发的灵感来源。然而,Augular中存在许多问题,在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]
所以说这里需要注意的一点。
更多推荐
所有评论(0)