Vue.js doit apprendre chaque jour calculé et $ watch

Les expressions de liaison dans les modèles sont très pratiques, mais elles ne sont en fait utilisées que pour des opérations simples. Le modèle consiste à décrire la structure de la vue. Mettre trop de logique dans un modèle peut rendre le modèle trop lourd et difficile à maintenir. C'est pourquoi Vue.js restreint les expressions de liaison à une expression. Si plusieurs expressions sont nécessaires, les attributs ** calcul doivent être utilisés.

Exemples de base

 <div id = "example"> a = {{a}}, b = {{b}} </div>

 var vm = new Vue ({el: '#Example', data: {a: 1}, calculé: {// un getter pour l'attribut calculé b: function () {// `ceci pointe vers l'instance VM return this.a + 1}}})

Ici, nous déclarons une propriété calculée b. La fonction que nous fournissons sera utilisée comme Getter pour la propriété VM.B.

 console.log (vm.b) // -> 2vm.a = 2Console.log (vm.b) // -> 3

Vous pouvez ouvrir la console du navigateur et modifier la machine virtuelle. La valeur de VM.B dépend toujours de la valeur de VM.A.

Vous pouvez lier les propriétés calculées dans un modèle comme vous liez une propriété normale. Vue sait que VM.B dépend de VM.A, donc lorsque VM.A change, les liaisons qui dépendent de VM.B seront également mises à jour. Et la meilleure chose est que nous créons cette dépendance de manière déclarative: les getters des propriétés calculées sont propres et n'ont pas d'effets secondaires, ils sont donc également faciles à tester et à comprendre.

Calculer les propriétés vs $ watch

Vue.js fournit une méthode $ watch, qui est utilisée pour observer les modifications de données sur les instances Vue. $ watch est tentant lorsque certaines données doivent changer en fonction d'autres données - surtout si vous êtes d'AngularJS. Cependant, il est généralement préférable d'utiliser des propriétés calculées au lieu d'un rappel impératif $ watch. Considérez l'exemple suivant:

 <div id = "Demo"> {{fullName}} </div> var vm = new Vue ({el: '#demo', data: {FirstName: 'Foo', LastName: 'Bar', FullName: 'Foo Bar'}}) Vm. $ Watch ('FirstName', fonction (Val) {this.fullname = Val + '' + this.lastName}) vm. $ watch ('lastname', fonction (val) {this.fullName = this.firstname + '' + val})

Le code ci-dessus est une répétition d'impératifs. Comparaison avec les propriétés de calcul:

 var vm = new vue ({data: {premierName: 'foo', lastname: 'bar'}, calculé: {fullName: function () {return this.firstname + '' + this.lastname}}})

C'est mieux, n'est-ce pas?

Calculer le secteur

L'attribut calculé est juste un Getter par défaut, mais vous pouvez également fournir un secteur en cas de besoin:

 // ... Compute: {fullName: {// getter get: function () {return this.firstname + '' + this.lastName}, // setter set: function (newValue) {var noms = newValue.split ('') this.firstname = nom

Maintenant, lors de l'appel vm.fullname = 'John Doe', le secteur sera appelé, et vm.firstname et vm.lastName seront également mis à jour en conséquence.

Cet article a été compilé dans le tutoriel d'apprentissage des composants frontaux "Vue.js", et tout le monde est le bienvenu pour apprendre et lire.

Pour les tutoriels sur les composants Vue.js, veuillez cliquer sur le tutoriel d'apprentissage de la composante Vue.js spéciale pour apprendre.

Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.