小編給大家分享一下Angularjs和Vue.js的區(qū)別是什么，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供網(wǎng)站設(shè)計(jì)、成都網(wǎng)站建設(shè)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)達(dá)日免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000+企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

選擇 Vue 而不選擇 Angular，有下面幾個(gè)原因，當(dāng)然不是對(duì)每個(gè)人都適合：

在 API 與設(shè)計(jì)兩方面上 Vue.js 都比 Angular 簡(jiǎn)單得多，因此你可以快速地掌握它的全部特性并投入開(kāi)發(fā)。

Vue.js 是一個(gè)更加靈活開(kāi)放的解決方案。它允許你以希望的方式組織應(yīng)用程序，而不是任何時(shí)候都必須遵循 Angular 制定的規(guī)則。它僅僅是一個(gè)視圖層，所以你可以將它嵌入一個(gè)現(xiàn)有頁(yè)面而不一定要做成一個(gè)龐大的單頁(yè)應(yīng)用。在配合其他庫(kù)方面它給了你更大的的空間，但相應(yīng)，你也需要做更多的架構(gòu)決策。例如，Vue.js 核心默認(rèn)不包含路由和 Ajax 功能，并且通常假定你在應(yīng)用中使用了一個(gè)模塊構(gòu)建系統(tǒng)。這可能是最重要的區(qū)別。

Angular 使用雙向綁定，Vue 也支持雙向綁定，不過(guò)默認(rèn)為單向綁定，數(shù)據(jù)從父組件單向傳給子組件。在大型應(yīng)用中使用單向綁定讓數(shù)據(jù)流易于理解。

在 Vue.js 中指令和組件分得更清晰。指令只封裝 DOM 操作，而組件代表一個(gè)自給自足的獨(dú)立單元 —— 有自己的視圖和數(shù)據(jù)邏輯。在 Angular 中兩者有不少相混的地方。

Vue.js 有更好的性能，并且非常非常容易優(yōu)化，因?yàn)樗皇褂门K檢查。Angular，當(dāng) watcher 越來(lái)越多時(shí)會(huì)變得越來(lái)越慢，因?yàn)樽饔糜騼?nèi)的每一次變化，所有 watcher 都要重新計(jì)算。并且，如果一些 watcher 觸發(fā)另一個(gè)更新，臟檢查循環(huán)（digest cycle）可能要運(yùn)行多次。 Angular 用戶常常要使用深?yuàn)W的技術(shù)，以解決臟檢查循環(huán)的問(wèn)題。有時(shí)沒(méi)有簡(jiǎn)單的辦法來(lái)優(yōu)化有大量 watcher 的作用域。

Vue.js 則根本沒(méi)有這個(gè)問(wèn)題，因?yàn)樗褂没谝蕾囎粉櫟挠^察系統(tǒng)并且異步列隊(duì)更新，所有的數(shù)據(jù)變化都是獨(dú)立地觸發(fā)，除非它們之間有明確的依賴關(guān)系。唯一需要做的優(yōu)化是在 v-for 上使用 track-by。

使用Angularjs和Vue.js對(duì)比

之前項(xiàng)目都是使用Angularjs，（注明此處主要講Angularjs 1）在初步使用Vue.js后做一個(gè)簡(jiǎn)答的對(duì)比筆記。  
首先從理論上簡(jiǎn)單說(shuō)一下各自的特點(diǎn)，之后再用幾個(gè)小的例子加以說(shuō)明。

Angular

• 1，MVVM（Model）(View)(View-model)
• 2，模塊化（Module）控制器（Contoller）依賴注入：
• 3，雙向數(shù)據(jù)綁定：界面的操作能實(shí)時(shí)反映到數(shù)據(jù)，數(shù)據(jù)的變更能實(shí)時(shí)展現(xiàn)到界面。
• 4，指令(ng-click ng-model ng-href ng-src ng-if...)
• 5，服務(wù)Service($compile $filter $interval $timeout $http...)

其中雙向數(shù)據(jù)綁定的實(shí)現(xiàn)使用了$scope變量的臟值檢測(cè)，使用$scope.$watch（視圖到模型），$scope.$apply(模型到視圖)檢測(cè)，內(nèi)部調(diào)用的都是digest，當(dāng)然也可以直接調(diào)用$scope.$digest進(jìn)行臟檢查。值得注意的是當(dāng)數(shù)據(jù)變化十分頻繁時(shí)，臟檢測(cè)對(duì)瀏覽器性能的消耗將會(huì)很大，官方注明的大檢測(cè)臟值為2000個(gè)數(shù)據(jù)。

Vue

vue.js官網(wǎng)：是一套構(gòu)建用戶界面的 漸進(jìn)式框架。與其他重量級(jí)框架不同的是，Vue 采用自底向上增量開(kāi)發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層，并且非常容易學(xué)習(xí)，非常容易與其它庫(kù)或已有項(xiàng)目整合。另一方面，Vue 完全有能力驅(qū)動(dòng)采用單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)開(kāi)發(fā)的復(fù)雜單頁(yè)應(yīng)用。

Vue.js 的目標(biāo)是通過(guò)盡可能簡(jiǎn)單的 API 實(shí)現(xiàn)響應(yīng)的數(shù)據(jù)綁定和組合的視圖組件。

• （1）模塊化，目前最熱的方式是在項(xiàng)目中直接使用ES6的模塊化，結(jié)合Webpack進(jìn)行項(xiàng)目打包
• （2）組件化，創(chuàng)造單個(gè)component后綴為.vue的文件，包含template(html代碼)，script(es6代碼),style(css樣式)
• （3）路由，

vue非常小巧，壓縮后min源碼為72.9kb，gzip壓縮后只有25.11kb，想比Angular為144kb，可以自駕搭配使用需要的庫(kù)插件，類似路由插件(Vue-router)，Ajax插件(vue-resource)等

下面直接上代碼

首先當(dāng)然是Hello World了

vue

<div id="app">  {{ message }}</div> new Vue({  el: '#app',  data: {    message: 'Hello Vue.js!'  }})

Angular

<div ng-app="myApp" ng-controller="myCtrl"> {{message}}</div> var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.message = "Hello world";});

相比較來(lái)看，vue采用了json的數(shù)據(jù)格式進(jìn)行dom和data的編寫，編寫風(fēng)格更加靠進(jìn)js的數(shù)據(jù)編碼格式，通俗易懂。

vue的雙向數(shù)據(jù)綁定

<div id="app">  <p>{{ message }}</p>  <input v-model="message"></div> new Vue({  el: '#app',  data: {    message: 'Hello Vue.js!'  }})

Angular的雙向數(shù)據(jù)綁定

<div ng-app="myApp" ng-controller="myCtrl">  <p>{{message}}</p>  <input ng-model="message"></div> var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.message = "Hello world!";});

vue雖然是一個(gè)輕量級(jí)的框架，提供的API確非常多，包括一些便捷的指令和屬性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js還支持指令的簡(jiǎn)寫方式：

• (1)事件click

  簡(jiǎn)寫方式：

• (2)屬性

  []（http://www.cnblogs.com/summer7310/p/url)）
  簡(jiǎn)寫方式：

vue.渲染列表

<div id="app">  <ul>    <li v-for="name in names">      {{ name.first }}    </li>  </ul></div> new Vue({  el: '#app',  data: {    names: [      { first: 'summer', last: '7310' },      { first: 'David', last:'666' },      { first: 'Json', last:'888' }    ]  }})

Angularjs渲染列表

<div ng-app="myApp" ng-controller="myCtrl">  <li ng-repeat="name in names">{{name.first}}</li></div> var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.names = [      { first: 'summer', last: '7310' },      { first: 'David', last:'666' },      { first: 'Json', last:'888' }    ]});

vue的循環(huán)

<ul>    <li v-for="item in list">        <a :href="item.url">{{item.title}}</a>    </li></ul>

angular和vue的渲染差不多

<div class="item" ng-repeat="news in  newsList">    <a ng-href="#/content/{{news.id}}">        <img ng-src="{{news.img}}" />        <div class="item-info">            <h4 class="item-title">{{news.title}}</h4>            <p class="item-time">{{news.createTime}}</p>        </div>    </a></div>

vue和Angular處理用戶輸入

<div id="app">  <p>{{ message }}</p>  <button v-on:click="reverseMessage">Reverse Message</button></div> new Vue({  el: '#app',  data: {    message: 'Hello Vue.js!'  },  methods: {    reverseMessage: function () {      this.message = this.message.split('').reverse().join('')    }  }})

<div ng-app="myApp" ng-controller="myCtrl"> <p>{{ message }}</p> <button ng-click="reverseMessage()">Reverse Message</button></div> var app = angular.module('myApp', []);app.controller('myCtrl', function($scope) {    $scope.message = "Hello world!";    $scope.reverseMessage = function() {        this.message = this.message.split('').reverse().join('')    }});

以上是Angularjs和Vue.js的區(qū)別是什么的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)-成都網(wǎng)站建設(shè)公司行業(yè)資訊頻道！

本文題目：Angularjs和Vue.js的區(qū)別是什么-創(chuàng)新互聯(lián)
本文鏈接：http://jinyejixie.com/article30/dijjso.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供品牌網(wǎng)站設(shè)計(jì)、Google、微信公眾號(hào)、用戶體驗(yàn)、移動(dòng)網(wǎng)站建設(shè)、服務(wù)器托管

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)