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

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é.

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 :

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                <!-- this指向vm实例 -->
                return this.didi+this.family
            }
        }
    })

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 :

<div id="example">
        <input type="text" v-model="didi">
        <input type="text" v-model="family">
        <br>
        didi={{didi}},family={{family}},didiFamily={{didiFamily}}
    </div>
    var vm = new Vue({
        el:&#39;#example&#39;,
        data:{
            didi:&#39;didi&#39;,
            family:&#39;family&#39;
        },
        computed:{
            <!-- 一个计算属性的getter -->
            didiFamily:function(){
                get:function(){
                    <!-- this指向vm实例 -->
                    return this.didi+this.family
                },
                <!-- 一个计算属性的setter -->
                set:function(newVal){
                    var names = newVal.split(&#39;&#39;)
                    this.didi = names[0]
                    this.didi = names[1]
                }
            }
        }
    })

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    
         }       
     }  
})

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               
             }      
         }       
     }  
})

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 :

<div id="example">
        <button @click=&#39;toggleShow&#39;>Toggle Show Total Price</button>
        <p v-if="showTotal">Total Price = {{totalPrice}}</p>
    </div>
    new Vue({
        el:&#39;#example&#39;,
        data:{
            showTotal:true,
            basePrice:100
        },
        computed:{
            totalPrice:function(){
                return this.basePrice + 1
            }
        },
        methods:{
            toggleShow:function(){
                this.showTotal = !this.showTotal
            }
        }
    })

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 :

<div id="items">
        <p v-repeat="items" vue-component="item">
            <button>{{fulltext}}</button>
        </p>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            item:{
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

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 :

<div id="items">
        <my-item v-repeat="items" inline-template>
            
        </my-item>
    </div>
    var items = [
        {number:1,text:&#39;one&#39;},
        {number:2,text:&#39;two&#39;}
    ]
    var vue = new Vue({
        el:&#39;#items&#39;,
        data:{
            items:items
        },
        components:{
            &#39;my-item&#39;:{
               replace:true, 
               computed:{
                    fulltext:function(){
                        return &#39;item&#39; +this.text
                    }
                }, 
            }
        }
    })

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!