Préface
Les attributs calculés sont utilisés pour décrire l'expression déclarative selon laquelle une valeur dépend d'autres valeurs. Lorsque vous liez des données à une propriété calculée dans un modèle, Vue met à jour le DOM lorsque toute valeur qu'elle dépend de la propriété calculée change. Cette fonctionnalité est très puissante, elle peut rendre votre code plus déclaratif, axé sur les données et facile à entretenir.
Les expressions 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 est de décrire la structure de la vue. Mettre trop de logique dans le modèle rendra le modèle trop lourd et difficile à maintenir.
C'est pourquoi Vue.js limite les expressions de liaison à une expression,
Si plusieurs expression sont nécessaires, les propriétés calculées doivent être utilisées.
Jetons un coup d'œil à ce simple exemple
<div id = "example"> a = {{a}}, b = {{b}} </div> var vm = new Vue ({// La raison de la nomm retourne this.a + 1}}})Résultat de sortie:
a = 1, b = 2
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 = 3Console.log (vm.b) // -> 3
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.
Si vous souhaitez observer les modifications de données sur les instances Vue, vous pouvez utiliser une méthode fournie par Vue.js $watch .
<div id = "Demo"> {{fullName}} </div> var vm = new Vue ({data: {FirstName: 'Foo', LastName: 'Bar', FullName: 'Foo Bar'}}}) Vm. $ Watch ('+ Firstname', Function (Val) {this.ullName = Val + '' '+ this.lastName}) vm. $ watch ('lastname', fonction (val) {this.fullName = this.firstname + '' + val}) Cependant, la méthode ci-dessus peut également être implémentée à l'aide computed :
var vm = new vue ({data: {premierName: 'foo', lastname: 'bar'}, calculé: {fullName: function () {return this.firstname + '' + this.lastname}}}) Est-il plus facile d'écrire de cette façon? Il n'y a pas de code en double inutile? Le responsable encourage également l'utilisation de méthodes computed .
Lorsque j'ai parlé de computed ci-dessus, il a été mentionné que cette méthode fournit la méthode get par défaut. Alors, y a-t-il set ?
// ... Compute: {fullName: {// getter get: function () {return this.firstname + '' + this.lastName}, // setter set: function (newValue) {var noms = newValue.split ('') this.firstname = nom Si nous appelons vm.fullName = 'John Doe' , setter sera appelé. vm.firstName et vm.lastName auront également des mises à jour correspondantes. Cette méthode est parfois utile.
Résumer
Ce qui précède est tout sur les attributs informatiques Vue.js. J'espère que cet article sera utile à tout le monde. L'éditeur mettra également à jour le contenu sur Vue.js l'un après l'autre. Les amis intéressés peuvent continuer à suivre Wulin.com.