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

最新推荐文章于 2023-11-15 08:29:01 发布

楚乌

最新推荐文章于 2023-11-15 08:29:01 发布

阅读量5.4k

点赞数 4

分类专栏：框架文章标签： angular 开发工具 javascript

本文链接：https://blog.csdn.net/qq_35227319/article/details/53768265

版权

0 篇文章 0 订阅

订阅专栏

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

这里我们只比较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中，向其他的实例传递数据的话需要使用到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]

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

关注