Dirty Checking Angularjs and Vuejs

Question

I really like the Angularjs, and when I read in articles about its discontinuation, it was that one of the main reasons was Dirty Checking. I think that Dirty Checking are the checks made by Two way data Binding, wanted to know if the Vuejs owns this Dirty Checking, because I lay seeing on the outside, I do not see the difference between the two codes. For me the two are two way data Binding

Using 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>

Using 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>

Answer 1

From what I know of Angular o ng-model and the v-model are the same idea. A quick search confirmed this.

There is much talk today of unidirectional data Binding, which means that the state/data mutations must occur in one direction, in a flow from A to B. In particular: from the holder of that state (the Store, the data or computed in Vue/Vuex).

This idea/rule is useful, but there are exceptions worth considering, such as the eval can be useful somewhere. This is one of them.

The v-model allows the this.teste of the component is changed when the input change, and allows the input be changed when the this.teste change. This can generate bugs, because Vue reacts to these changes, and be difficult to "debug".

Still, the v-model is not mandatory. It is perfectly possible to make a closed cycle of state to avoid v-model. A minimalist example would be:

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>

However, I think it is practical, and limited to specific cases, it is useful.

The same idea with 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>