Angularjs와 Vue.js의 차이점은 무엇입니까? 단순비교

권장 튜토리얼: "angularjs Tutorial"

다음과 같은 이유로 Angular 대신 Vue를 선택하십시오. 물론 이는 모든 사람에게 적합하지 않습니다.

Vue.js는 API와 디자인 측면에서 모두 더 좋습니다. 훨씬 간단합니다. Angular보다 모든 기능을 빠르게 익히고 개발을 시작할 수 있습니다.

Vue.js는 더욱 유연하고 개방적인 솔루션입니다. 이를 통해 항상 Angular가 정한 규칙을 따르지 않고도 원하는 방식으로 애플리케이션을 구성할 수 있습니다. 이는 단지 뷰 레이어이므로 거대한 단일 페이지 애플리케이션으로 만들지 않고도 기존 페이지에 포함할 수 있습니다. 다른 라이브러리와 함께 작업할 수 있는 공간이 더 많이 제공되지만 결과적으로 더 많은 아키텍처 결정을 내려야 합니다. 예를 들어 Vue.js 코어에는 기본적으로 라우팅 및 Ajax 기능이 포함되어 있지 않으며 일반적으로 앱에서 모듈 빌드 시스템을 사용한다고 가정합니다. 이것이 아마도 가장 중요한 차이점일 것이다.

Angular는 양방향 바인딩을 사용하고 Vue도 양방향 바인딩을 지원하지만 기본값은 단방향 바인딩이며 데이터는 상위 컴포넌트에서 하위 컴포넌트로 한 방향으로 전달됩니다. 대규모 애플리케이션에서는 단방향 바인딩을 사용하여 데이터 흐름을 더 쉽게 이해할 수 있습니다.

Vue.js에서는 지침과 구성 요소가 더 명확하게 구분됩니다. 지시문은 DOM 작업만 캡슐화하는 반면 구성 요소는 자체 뷰와 데이터 논리를 갖춘 독립적인 단위를 나타냅니다. Angular에서는 둘 사이에 많은 혼란이 있습니다.

Vue.js는 성능이 더 좋고 더티 검사를 사용하지 않기 때문에 최적화하기가 매우 쉽습니다. 감시자가 많아질수록 Angular는 점점 느려질 것입니다. 범위가 변경될 때마다 모든 감시자를 다시 계산해야 하기 때문입니다. 또한 일부 감시자가 다른 업데이트를 트리거하는 경우 다이제스트 주기가 여러 번 실행되어야 할 수도 있습니다. Angular 사용자는 더티 체크 루프 문제를 해결하기 위해 난해한 기술을 사용하는 경우가 많습니다. 감시자가 많은 경우 스코프를 최적화하는 쉬운 방법이 없는 경우가 있습니다.

Vue.js는 종속성 추적 및 비동기 대기열 업데이트를 기반으로 하는 관찰 시스템을 사용하기 때문에 이러한 문제가 전혀 없습니다. 모든 데이터 변경 사항은 둘 사이에 명확한 종속성이 없는 한 독립적으로 트리거됩니다. 필요한 유일한 최적화는 v-for에서 추적을 사용하는 것입니다.

Angularjs와 Vue.js 사용 비교

이전 프로젝트는 모두 Angularjs를 사용했습니다. (이 글에서는 주로 Angularjs에 대해 이야기하고 있으니 참고하세요. 1) Vue.js를 처음 사용한 후 간략한 비교 노트를 작성해 보세요.
우선 각각의 특성을 이론적으로 간략하게 설명하고 몇 가지 작은 예를 들어 설명하겠습니다.

Angular

• 1, MVVM(모델)(뷰)(뷰 모델)
• 2, 모듈형(모듈) 컨트롤러(컨트롤러) 종속성 주입:
• 3, 양방향 데이터 바인딩: 인터페이스 작업은 실시간으로 데이터에 반영될 수 있으며, 데이터 변경 사항은 실시간으로 인터페이스에 표시될 수 있습니다.
• 4, 명령(ng-click ng-model ng-href ng-src ng-if...)
• 5, 서비스 서비스($compile $filter $interval $timeout $http...)

among 양방향 데이터 바인딩 구현에서는 $scope.$watch(모델 보기), $scope.$apply(모델 보기) 감지를 사용하여 $scope 변수의 더티 값 감지를 사용하며 내부 호출은 다이제스트입니다. 물론 더티 검사를 위해 $scope.$digest를 직접 호출할 수도 있습니다. 데이터가 매우 자주 변경되는 경우 더티 감지는 많은 브라우저 성능을 소모한다는 점에 주목할 가치가 있습니다. 공식 최대 더티 감지 값은 2000개 데이터입니다.

Vue

vue.js 공식 웹사이트: 사용자 인터페이스 구축을 위한 진보적인 프레임워크입니다. 다른 헤비급 프레임워크와 달리 Vue는 상향식 증분 개발 설계를 채택합니다. Vue의 핵심 라이브러리는 뷰 레이어에만 중점을 두고 있으며 다른 라이브러리나 기존 프로젝트와 학습하고 통합하기가 매우 쉽습니다. 반면 Vue는 Vue 생태계에서 지원하는 단일 파일 구성 요소 및 라이브러리로 개발된 복잡한 단일 페이지 애플리케이션을 완벽하게 구동할 수 있습니다.

Vue.js의 목표는 가능한 가장 간단한 API를 통해 반응형 데이터 바인딩 및 구성된 뷰 구성 요소를 활성화하는 것입니다.

• (1) 모듈화 현재 가장 인기 있는 방법은 프로젝트에서 ES6 모듈화를 직접 사용하고 이를 프로젝트 패키징을 위해 Webpack과 결합하는 것입니다.
• (2) 컴포넌트화, 접미사가 .vue인 단일 컴포넌트 파일을 생성합니다. 템플릿(html 코드), 스크립트(es6 코드), 스타일(css 스타일)
• (3) 라우팅,

vue는 매우 작습니다. 최소 소스 코드는 압축 후 72.9kb, gzip 압축 후 25.11kb에 불과합니다. Angular에 비해 144kb 크기이므로 라우팅 플러그인(Vue-router), Ajax 플러그인(vue-resource) 등 필수 라이브러리 플러그인과 함께 직접 사용할 수 있습니다.

코드는 다음과 같습니다. 바로 아래

첫 번째는 당연히 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";});

에 비해 vue는 json 데이터 형식을 사용하여 DOM과 데이터를 작성하는데, 작성 스타일이 좀 더 다양합니다. 이해하기 쉬운 js 데이터 인코딩 형식을 기반으로 합니다.

vue의 양방향 데이터 바인딩

<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="Angularjs와 Vue.js의 차이점은 무엇입니까? 단순비교" >        <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教程》

위 내용은 Angularjs와 Vue.js의 차이점은 무엇입니까? 단순비교의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!