3

Eu gosto muito do AngularJS, e quando li em artigos sobre seu descontinuamento, era que um dos principais motivos se dava pelo Dirty Checking. Penso eu que Dirty Checking são as verificações feitas pelo Two way data binding, queria saber se o VueJS possui esse Dirty Checking, porque eu leigo vendo por fora, não vejo a diferença entre os dois códigos. Para mim os dois são two way data binding

Usando VueJS

var vm = new Vue({
  el: '#app',
  data: {
  teste: "Teste"
  }
});
<script src="https://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>

<div id="app">
  <input v-model="teste">
  {{teste}}
</div>

Usando AngularJS

var app = angular.module('app', []);

app.controller('MainCtrl', function($scope) {
  $scope.teste = 'Teste';
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app" ng-controller="MainCtrl">
  <input ng-model="teste">
  <p>{{ teste }}</p>
</div>

4
  • 2
    Boa pergunta! Depois das publicações que eu vi hoje aqui no site, queria poder upar essa aqui umas 20 vezes.
    – Jéf Bueno
    13/11/2017 às 19:13
  • Desculpe, não domino AngularJs, mas aonde leu sobre ele ser descontinuado? Quero dizer, acho que leu de algum lugar que possivelmente tenha alguma informação errada. Não que eles não promovam o Angular (sem JS), mas creio que o AngularJS ainda recebe melhorias, mas seria interessante se você posta-se de onde obteve essa informação.
    – Syzoth
    13/11/2017 às 19:25
  • Creio que AngularJS é a versão 1. A semana passada saiu o Angular 5.
    – Sergio
    13/11/2017 às 19:27
  • AngularJS é uma coisa. Angular é outra. O AngularJS é chamado de Angular 1 porque foi a primeira versão, mas para não confundir, o pessoal da Google separou o AngularJS e Angular. O Angular (Que já esta na sua versão 5), é um framework re-escrito do zero, ele tem conceitos totalmente diferentes do AngularJS
    – Jackson
    14/11/2017 às 11:08

1 Resposta 1

1

Pelo que conheço de Angular o ng-model e o v-model são a mesma ideia. Uma pesquisa rápida confirmou isso.

Hoje em dia fala-se muito de unidirectional data binding, o que quer dizer que o state/mutações de dados devem acontecer numa só direção, num fluxo de A para B. Em particular: do detentor desse state (a Store, o data ou computed no Vue/Vuex).

Esta ideia/regra é útil, mas existem exepções que vale a pena considerar, assim como o eval pode ser útil algures. Esta é uma delas.

O v-model permite que o this.teste do componente seja mudado quando o input mudar, e permite o input ser mudado quando o this.teste mudar. Isso pode gerar bugs, porque o Vue reage a essas mudanças, e ser difícil de "debugar".

Ainda assim, o v-model não é obrigatório. É perfeitamente possivel fazer um ciclo fechado de state para evitar o v-model. Um exemplo minimalista seria:

new Vue({
  el: '#app',
  data: {
    value: ''
  },
  watch: {
    value(val) {
      console.log('Novo value!', val);
    }
  },
  methods: {
    updateValue(e) {
      e.preventDefault();
      this.value = e.target.value;
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <input type="text" :value="value" @input="updateValue" placeholder="Escreve aqui...">
  <p>{{value}}</p>
</div>

Porém, eu acho que é prático, e limitado a casos específicos, é útil.

A mesma ideia com v-modal:

new Vue({
  el: '#app',
  data: {
    value: ''
  },
  watch: {
    value(val) {
      console.log('Novo value!', val);
    }
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.3/vue.min.js"></script>
<div id="app">
  <input type="text" v-model="value" placeholder="Escreve aqui...">
  <p>{{value}}</p>
</div>

3
  • Gostei da resposta! Mas ainda não me deixou muito claro... Como você disse, v-model e ng-model são muito parecidos. E de facto, são! Mas Porque em tanto lugar diz que ng-model fazia um Dirt Cheking ruim, e o v-model não? O que o AngularJS tinha de tão ruim no seu two way data binding comparado ao VueJS?
    – Jackson
    14/11/2017 às 11:12
  • 1
    @Jackson não conheço o código interno do Angular mas pelo que li ele faz dirty checking quando vai buscar o valor dos elementos que usam esse ng-model. E lendo este comentário do criados do Vue que trabalhava no Google e conhece bem Angular o Vue não usa dirty checking.
    – Sergio
    14/11/2017 às 18:33
  • Interessante! Pelo que li o Vue não usa o Dirty Cheking, e sim Observable pattern. Dei uma lida nessa pergunta que achei super interessante! Vale a leitura: stackoverflow.com/questions/24698620/dirty-checking-on-angular
    – Jackson
    14/11/2017 às 19:14

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .