L'utilisation et la différence entre Computed et Watch dans Vue-js tutoriel-php.cn

L'utilisation et la différence entre Computed et Watch dans Vue

angryTom

Libérer： 2020-02-07 17:37:27

original

2149 Les gens l'ont consulté

Cet article présente la différence entre l'attribut calculé et l'attribut de surveillance surveillé dans Vue. J'espère qu'il sera utile aux étudiants qui apprennent le framework front-end Vue !

L'utilisation et la différence entre Computed et Watch dans Vue

1. Attributs calculés (calculés)

1. Les attributs calculés sont utilisés pour rendre les expressions dans les modèles concises et faciles à gérer. . Conformément à l'intention de conception originale pour des calculs simples.

Par exemple :

<p id="app">
        {{ myname.substring(0,1).toUpperCase() + myname.substring(1) }} 
</p>

Copier après la connexion

L'opération est trop complexe, longue et difficile à maintenir, nous devrions donc utiliser des attributs calculés pour écrire des opérations complexes.

Par conséquent, il peut être réécrit comme :

<body>
    <div id="app">
        {{ changewords }} // 渲染 不用写()
    </div>
</body>
<script>
    var vm = new Vue({
            el: "#app",
            data:{},
    　　　　　// 计算属性
            computed:{
                changewords(){
                    return this.myname.substring(0,1).toUpperCase() + this.myname.substring(1)
                }
            }
     })
</script>

Copier après la connexion

Résumé :

1 Les variables ne sont pas définies dans les données, mais sont définies dans le calcul. La méthode d'écriture est la même. comme méthode, et il y a une valeur de retour . Le nom de la fonction est rendu directement dans le modèle de page sans parenthèses.

2. Mettez à jour les résultats en fonction des changements dans les variables transmises.

3. Les propriétés calculées sont mises en cache en fonction des dépendances réactives. Si l'une des valeurs n'a pas changé, elle appelle les données mises en cache lors du dernier calcul, améliorant ainsi les performances du programme. Les méthodes seront recalculées à chaque appel. Afin de consommer des ressources inutiles, nous choisissons d'utiliser des attributs calculés.

Exemple de requête floue pour les attributs calculés :

<body>
    <div id="app">
        <input type="text" v-model="mytext">
        <ul>
            <li v-for="data in datalistcom" :key="data">
                {{ data }}
            </li>
        </ul>
    </div>
</body>
<script>
    var vm = new Vue({
        el: "#app",
        data:{
            datalist:["aaa","bbb","ccc","ddd","aa","a","cc","dd"],
            mytext:&#39;&#39;
        },
        computed:{
            datalistcom(){
                return this.datalist.filter(item=>item.indexOf(this.mytext)>-1)
            }
        }
    })
</script>

Copier après la connexion

2. Surveillance des attributs (regarder)

Quand il s'agit des attributs calculés ci-dessus, lors de l'initialisation. Elle peut être surveillée et calculée mais la montre ne se déclenchera qu'en cas de changement.

Lorsque certaines données doivent changer à mesure que d'autres données changent, ou lorsque vous devez effectuer des opérations asynchrones ou coûteuses lorsque les données changent, vous pouvez utiliser watch.

Exemple :

<body>
    <div id="app">
        <p>单价：<input type="text" v-model="price"></p>
        <p>数量：<input type="text" v-model="number"></p>
        <p>计算金额：{{sum}}</p>
    </div>
</body>
<script>
var vm  = new Vue({
    el:"#app",
    data:{
        price:100,
        number:1,
        sum:0
    },
    //监听某一个值或者状态发生变化 变化就会触发watch 
    watch:{
        // 监听的参数的名字要一致
        price(){
            console.log(this.price)
            if(this.price*this.number < 1000 && this.price*this.number > 0){
                this.sum = this.price*this.number + 100
            }else{
                this.sum = this.price*this.number
            }
        },
        number(){
            console.log(this.price)
            if(this.price*this.number < 1000 && this.price*this.number > 0){
                this.sum = this.price*this.number + 100
            }else{
                this.sum = this.price*this.number
            }
        }
    }
})
</script>

Copier après la connexion

La différence entre les propriétés calculées et la surveillance des propriétés :

1. Les variables de propriété calculées sont définies dans le calcul et la surveillance des propriétés est calculée. dans la définition des données.

2. Les attributs calculés sont des descriptions déclaratives d'une valeur qui dépend d'autres valeurs. Lorsque la valeur dépendante change, le résultat est recalculé et le DOM est mis à jour. Les attributs écoutent les variables définies. Lorsque la valeur définie change, la fonction correspondante est exécutée.

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!