Propriétés calculées Vue.js

Mot-clé des propriétés calculées :computed。

Les propriétés calculées sont très utiles lorsqu'on doit gérer une logique complexe.

Vous pouvez regarder l'exemple suivant d'inversion d'une chaîne :

Exemple 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

Essayez-le vous-même »

Dans l'exemple 1, le modèle devient très complexe et n'est pas facile à lire et à comprendre.

Ensuite, regardons un exemple qui utilise des propriétés calculées :

Exemple 2

<div id="app"> <p>Chaîne originale : {{ message }}</p> <p>Chaîne inversée après calcul : {{ reversedMessage }}</p> </div> <script>var vm = new Vue({ el: '#app', data: { message: 'Example!' }, computed: { // Accesseur pour la propriété calculée reversedMessage: function () { // `this` pointe vers l'instance vm return this.message.split('').reverse().join('') } } })</script>

Essayez-le vous-même »

Dans l'exemple 2, une propriété calculée nommée reversedMessage est déclarée.

La fonction fournie sera utilisée comme getter de la propriété vm.reversedMessage.

vm.reversedMessage dépend de vm.message. Lorsque vm.message change, vm.reversedMessage sera également mise à jour.

propriétés calculées vs méthodes

Nous pouvons utiliser des méthodes au lieu de propriétés calculées. L'effet des deux est le même, mais les propriétés calculées sont mises en cache en fonction de leurs dépendances et ne sont réévaluées que lorsque les dépendances concernées changent. Lorsque vous utilisez des méthodes, la fonction sera toujours appelée et exécutée à nouveau lors d'un nouveau rendu.

Exemple 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

Essayez-le vous-même »

On peut dire que l'utilisation de propriétés calculées offre de meilleures performances, mais si vous ne voulez pas de mise en cache, vous pouvez utiliser la propriété methods.

setter de propriété calculée

Une propriété calculée n'a qu'un getter par défaut, mais vous pouvez également fournir un setter lorsque c'est nécessaire :

Exemple 4

var vm = new Vue({ el: '#app', data: { name: 'Google', url: 'http://www.google.com' }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } }) //Lorsque le setter est appelé, vm.name et vm.url seront également mis à jour en conséquence. vm.site = 'Example http://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

Essayez-le vous-même »

D'après le résultat d'exécution de l'exemple, lorsque vm.site = 'Example http://www.example.com'; est exécuté, le setter sera appelé, et vm.name et vm.url seront également mis à jour en conséquence.

Autres extensions