Maison> interface Web> Voir.js> le corps du texte

Que sont les propriétés calculées par vue ?

coldplay.xixi
Libérer: 2020-10-10 12:05:04
original
16706 Les gens l'ont consulté

Propriétés calculées Vue : Avant la version [Vue.js 0.12.8], tant que la propriété calculée correspondante est lue, le getter correspondant sera réexécuté. Dans la version [Vue.js 0.12.8], cet aspect a été optimisé, c'est-à-dire que le getter ne sera réexécuté que lorsque la valeur de l'attribut dont dépend l'attribut calculé a changé.

Que sont les propriétés calculées par vue ?

propriétés calculées :

Propriétés calculées

Une propriété calculée signifie que lorsque la valeur de sa propriété dépendante change, la valeur de cette propriété sera automatiquement mise à jour et la partie DOM associée sera également automatiquement mise à jour simultanément.

Le code est le suivant :


didi={{didi}},family={{family}},didiFamily={{didiFamily}}
var vm = new Vue({ el:'#example', data:{ didi:'didi', family:'family' }, computed:{ didiFamily:function(){ return this.didi+this.family } } })
Copier après la connexion

Lorsque les valeurs de vm.didi et vm.family changent, la valeur de vm.didiFamily sera automatiquement mise à jour, et la partie DOM sera être automatiquement mis à jour de manière synchrone.

L'exemple précédent ne fournit en fait que des getters, en plus des getters. Nous pouvons également définir des setters pour les propriétés calculées. L'exemple de code est le suivant :


didi={{didi}},family={{family}},didiFamily={{didiFamily}}
var vm = new Vue({ el:'#example', data:{ didi:'didi', family:'family' }, computed:{ didiFamily:function(){ get:function(){ return this.didi+this.family }, set:function(newVal){ var names = newVal.split('') this.didi = names[0] this.didi = names[1] } } } })
Copier après la connexion

Lorsque la valeur de vm.didiFamily est définie, les valeurs de vm.didi et vm.family seront également automatiquement mises à jour.

2. Mise en cache des attributs calculés

Les caractéristiques des attributs calculés sont en effet attrayantes, mais si un grand nombre d'opérations fastidieuses sont effectuées dans la méthode des attributs calculés, cela peut causer Voici quelques problèmes de performances. Par exemple, effectuer une boucle sur un grand tableau pour effectuer de nombreuses opérations dans un getter de propriété calculée entraînera de nombreuses opérations inutiles lorsque la propriété calculée est fréquemment appelée.

Avant Vue.js version 0.12.8, tant que la propriété calculée correspondante est lue, le getter correspondant sera réexécuté. Dans Vue.js version 0.12.8, cet aspect a été optimisé, c'est-à-dire que le getter ne sera réexécuté que lorsque la valeur de la propriété dont dépend la propriété calculée a changé.

Il y a aussi un problème, c'est-à-dire que le getter ne sera réexécuté que lorsque l'attribut de données observé dans l'instance Vue change. Mais parfois, les propriétés calculées reposent sur des propriétés de données non observables en temps réel. L'exemple de code est le suivant :

var vm = new Vue({ data:{ welcome:'welcome to join didiFamily' }, computed:{ example:function(){ return Date.now() + this.welcome } } })
Copier après la connexion


Nous devons obtenir l'heure la plus récente à chaque fois que nous accédons à l'exemple au lieu de l'heure mise en cache. À partir de la version 0.12.11 de Vue.js, un commutateur de cache est fourni par défaut. Spécifiez le champ de cache dans l'objet d'attribut calculé pour contrôler s'il faut activer la mise en cache. L'exemple de code est le suivant :

var vm = new Vue({ data:{ welcome:'welcome to join didiFamily' }, computed:{ example:function(){ //关闭缓存,默认为true cache:false, get:function(){ return Date.now() + this.welcome } } } })
Copier après la connexion


Après avoir défini le cache sur false et désactivé le cache, la méthode getter sera réexécutée à chaque accès direct à vm.example .

3. Questions fréquemment posées

Lors de l'utilisation de propriétés calculées dans le développement réel, nous rencontrerons divers problèmes. Voici quelques problèmes courants collectés et leurs solutions.

Scénarios dans lesquels le getter d'attribut calculé n'est pas exécuté

Du point précédent, nous avons appris que lorsque l'attribut de données dont dépend l'attribut calculé change, la méthode getter de l'attribut calculé sera exécutée . Mais dans certains cas, même si l'attribut de données dépendant a changé, la méthode getter de l'attribut calculé ne sera pas exécutée. Mais dans certains cas, même si l'attribut de données dépendant a changé, la méthode getter de l'attribut calculé ne sera pas exécutée.

Lorsque le nœud contenant l'attribut calculé est supprimé et que l'attribut n'est plus référencé ailleurs dans le modèle, la méthode getter correspondante de l'attribut calculé ne sera pas exécutée. L'exemple de code est le suivant :

Total Price = {{totalPrice}}

new Vue({ el:'#example', data:{ showTotal:true, basePrice:100 }, computed:{ totalPrice:function(){ return this.basePrice + 1 } }, methods:{ toggleShow:function(){ this.showTotal = !this.showTotal } } })
Copier après la connexion

Lorsque vous cliquez sur le bouton pour définir showTotal sur false, l'élément P sera supprimé et la méthode getter de l'attribut calculé totalPrice à l'intérieur de l'élément P ne sera pas exécutée. Mais lorsque l'attribut calculé apparaît toujours dans le modèle, la méthode getter sera toujours exécutée

 2. Utilisation des attributs calculés dans v-repeat

Parfois, après avoir obtenu la collecte de données JSON du backend, Nous devons appliquer des propriétés calculées à une seule donnée. Dans les versions antérieures à Vue.js 0.12, nous pouvons utiliser la directive v-component sur l'élément où se trouve v-repeat. L'exemple de code est le suivant :

var items = [ {number:1,text:'one'}, {number:2,text:'two'} ] var vue = new Vue({ el:'#items', data:{ items:items }, components:{ item:{ computed:{ fulltext:function(){ return 'item' +this.text } }, } } })
Copier après la connexion

Dans Vue.js version 0.12, Vue.js a abandonné la directive v-component, nous devons donc utiliser des composants d'éléments personnalisés pour implémenter les propriétés calculées dans v-repeat. L'exemple de code est le suivant :

var items = [ {number:1,text:'one'}, {number:2,text:'two'} ] var vue = new Vue({ el:'#items', data:{ items:items }, components:{ 'my-item':{ replace:true, computed:{ fulltext:function(){ return 'item' +this.text } }, } } })
Copier après la connexion

Recommandations d'apprentissage gratuites associées :Tutoriel vidéo js

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!