What are the differences between Angularjs and Vue.js? Simple comparison

Recommended related tutorials: "angularjs Tutorial"

Choose Vue instead of Angular for the following reasons, which of course are not for everyone Both are suitable for:

Vue.js is much simpler than Angular in terms of API and design, so you can quickly master all its features and invest in development.

Vue.js is a more flexible and open solution. It allows you to organize your application the way you want without having to follow the rules laid down by Angular at all times. It's just a view layer, so you can embed it into an existing page without necessarily making it a huge single-page application. It gives you more room to work with other libraries, but in turn, you need to make more architectural decisions. For example, Vue.js core does not include routing and Ajax functionality by default, and generally assumes you are using a module build system in your app. This is probably the most important distinction.

Angular uses two-way binding, and Vue also supports two-way binding, but the default is one-way binding, and data is passed from the parent component to the child component in one direction. Use one-way binding in large applications to make the data flow easier to understand.

Instructions and components are more clearly separated in Vue.js. Directives only encapsulate DOM operations, while components represent a self-contained independent unit - with its own view and data logic. There is a lot of confusion between the two in Angular.

Vue.js has better performance and is very, very easy to optimize because it does not use dirty checking. Angular will become slower and slower when there are more and more watchers, because all watchers must be recalculated for every change in the scope. Also, if some watchers trigger another update, the digest cycle may have to run multiple times. Angular users often resort to esoteric techniques to solve the problem of dirty check loops. Sometimes there is no easy way to optimize a scope with a large number of watchers.

Vue.js does not have this problem at all, because it uses an observation system based on dependency tracking and asynchronous queue updates. All data changes are triggered independently unless there is a clear dependency between them. The only optimization needed is to use track-by on v-for.

Comparison between using Angularjs and Vue.js

The previous projects all used Angularjs, (please note that the main focus here is Angularjs 1) Make a short comparison note after the initial use of Vue.js .
First of all, let’s briefly talk about their respective characteristics in theory, and then use a few small examples to illustrate them.

Angular

• 1，MVVM(Model)(View)(View-model)
• 2， Modular (Module) controller (Contoller) dependency injection:
• 3, two-way data binding: the operation of the interface can be reflected in the data in real time, and the changes in the data can be displayed in the interface in real time.
• 4, Instruction (ng-click ng-model ng-href ng-src ng-if...)
• 5, Service Service($compile $filter $interval $timeout $http ...)

The implementation of two-way data binding uses dirty value detection of $scope variables, using $scope.$watch (view to model), $scope.$apply (model to View) detection, internal calls are digest, of course, you can also directly call $scope.$digest for dirty checking. It is worth noting that when data changes very frequently, dirty detection will consume a lot of browser performance. The official maximum dirty detection value is 2000 pieces of data.

Vue

vue.js official website: It is a progressive framework for building user interfaces. Unlike other heavyweight frameworks, Vue adopts a bottom-up incremental development design. Vue's core library only focuses on the view layer, and is very easy to learn and integrate with other libraries or existing projects. Vue, on the other hand, is fully capable of driving complex single-page applications developed with single-file components and libraries supported by the Vue ecosystem.

The goal of Vue.js is to enable responsive data binding and composed view components through the simplest possible API.

• (1) Modularization. Currently, the hottest way is to use ES6 modularization directly in the project and combine it with Webpack for project packaging.
• (2) Componentization to create a single The component file with the suffix .vue contains template (html code), script (es6 code), style (css style)
• (3) routing,

vue is very small, After compression, the min source code is 72.9kb, and after gzip compression, it is only 25.11kb, which is 144kb compared to Angular. You can use it by yourself with the required library plug-ins, such as routing plug-ins (Vue-router), Ajax plug-ins (vue-resource), etc.

The code is directly below

The first is of course Hello World

vue

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

Angular

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

In comparison, vue uses the json data format to write dom and data, and the writing style is more based on the js data encoding format, which is easy to understand.

Vue’s two-way data binding

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

Angular的双向数据绑定

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

vue虽然是一个轻量级的框架，提供的API确非常多，包括一些便捷的指令和属性操作，一般vue是指令使用(v-)操作符，相比angularjs指令使用（ng-）。其中vue.js还支持指令的简写方式：

• (1)事件click

  简写方式：

• (2)属性

  []（http://www.cnblogs.com/summer7310/p/url)）
  简写方式：

vue.渲染列表

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

Angularjs渲染列表

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

vue的循环

<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  src="/static/imghwm/default1.png"  data-src="{{news.img}}"  class="lazy"  ng- / alt="What are the differences between Angularjs and Vue.js? Simple comparison" >        <div class="item-info">            <h3 id="news-title">{{news.title}}</h3>            <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: &#39;#app&#39;,  data: {    message: &#39;Hello Vue.js!&#39;  },  methods: {    reverseMessage: function () {      this.message = this.message.split(&#39;&#39;).reverse().join(&#39;&#39;)    }  }})

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

相关教程推荐：《angular教程》、《vue教程》

The above is the detailed content of What are the differences between Angularjs and Vue.js? Simple comparison. For more information, please follow other related articles on the PHP Chinese website!