Explication détaillée de la fonction calculée dans la documentation Vue

Vue.js est un framework frontal JavaScript populaire. Il peut facilement réaliser la connexion entre HTML et JavaScript, améliorant ainsi les performances des applications Web. Il existe une fonction appelée computed dans le framework Vue.js. Son objectif principal est d'effectuer des calculs réactifs et des opérations de formule sur les données de la page. Ensuite, expliquons cette fonction en détail. computed的函数，其主要用途是用来对页面数据进行响应式计算和公式运算。接下来就让我们来详解一下这个函数。

什么是computed函数？

computed函数是Vue.js中的一个非常重要的函数，其作用是用于计算属性，计算属性能对其他的属性进行数据处理，返回新的数据。computed函数依赖于data对象中定义的数据，当这些数据发生变化时，computed函数内部的代码也会自动更新。

我们可以将computed函数看做是Vue中的一个响应式数据，因为它也具备响应式的特性。当计算属性的依赖数据发生改变时，计算属性会自动重新计算。

语法

computed函数的语法非常简单：

computed: {
    计算属性名字: function() {
        //return 你要计算的值
    }
}

这里我们需要用到一个关键字computed，其后面跟着一个对象，对象中包含一个或者多个计算属性。计算属性名字即为我们自己定义的名称（可以理解为变量名），它们的返回值就是我们计算结果。这里需要注意的是，在计算属性的方法中不要对其他的data数据进行手动更改，因为这样会造成死循环。

实例

为了帮助大家更好地理解computed函数，下面来看一个实例。

<div id="app">
    <input v-model="message" />
    <p>{{ reversedMessage }}</p>
</div>

我们在模板中定义了一个输入框和一个段落标签，输入框中的内容通过v-model指令与data中的message数据绑定。同时，我们定义了一个计算属性reversedMessage，该计算属性返回的是message数据的倒序排列结果。下面是完整的JavaScript代码：

var app = new Vue({
    el: '#app',
    data: {
        message: ''
    },
    computed: {
        reversedMessage: function() {
            return this.message.split('').reverse().join('')
        }
    }
})

这个实例中的computed函数中的reversedMessage方法是用来计算message倒序结果的。当我们在输入框中输入信息时，reversedMessage方法就会自动地被触发更新。这是因为reversedMessage方法依赖于data中的message数据，只要该数据发生变化，reversedMessage方法就会自动刷新页面。

computed函数的优点

computed函数主要有以下几个优点：

1.节省代码：在使用computed函数的情况下，我们无需写过多的代码，就可以完成对数据的更新和计算。

2.提高性能：computed函数的计算结果是会缓存的，只有当其所依赖的数据发生改变时，才会重新计算。

3.代码简洁：由于computed函数自动检测数据更改，所以我们无需事先指定计算属性的依赖数据。这样就可以大大简化我们的代码。

总结

computed

Qu'est-ce qu'une fonction calculée ? 🎜🎜La fonction calculée est une fonction très importante dans Vue.js. Sa fonction est de calculer les propriétés calculées peuvent effectuer un traitement de données sur d'autres propriétés et renvoyer de nouvelles données. La fonction calculée s'appuie sur les données définies dans l'objet de données. Lorsque ces données changent, le code à l'intérieur de la fonction calculée sera automatiquement mis à jour. 🎜🎜Nous pouvons considérer la fonction calculée comme une donnée réactive dans Vue, car elle possède également des caractéristiques réactives. Les propriétés calculées sont automatiquement recalculées lorsque leurs données dépendantes changent. 🎜🎜Syntaxe🎜🎜La syntaxe de la fonction calculée est très simple : 🎜rrreee🎜Ici, nous devons utiliser un mot-clé calculé, suivi d'un objet, qui contient un ou Plusieurs propriétés calculées. Les noms d'attributs calculés sont des noms définis par nous-mêmes (peuvent être compris comme des noms de variables), et leurs valeurs de retour sont nos résultats de calcul. Ce qu'il faut noter ici, c'est qu'il ne faut pas modifier manuellement les autres données dans la méthode de calcul des attributs, car cela provoquerait une boucle infinie. 🎜🎜Exemple🎜🎜Pour vous aider à mieux comprendre la fonction calculée, regardons un exemple ci-dessous. 🎜rrreee🎜Nous avons défini une zone de saisie et une balise de paragraphe dans le modèle. Le contenu de la zone de saisie est lié aux données du message dans data via la directive v-model. En même temps, nous avons défini un attribut calculé reversedMessage, qui renvoie l'ordre inverse des données du message. Voici le code JavaScript complet : 🎜rrreee🎜La méthode reversedMessage dans la fonction calculed dans cet exemple est utilisée pour calculer le résultat de l'ordre inverse du message. Lorsque nous saisissons des informations dans la zone de saisie, la méthode reversedMessage sera automatiquement déclenchée pour se mettre à jour. En effet, la méthode reversedMessage s'appuie sur les données message dans data. Tant que les données changent, la méthode reversedMessage actualisera automatiquement la page. . 🎜🎜Avantages de la fonction calculée🎜🎜La fonction calculée présente principalement les avantages suivants : 🎜🎜1 Enregistrer le code : lorsque nous utilisons la fonction calculée, nous n'en avons pas besoin. écrire Avec plus de code, vous pouvez terminer la mise à jour et le calcul des données. 🎜🎜2. Améliorer les performances : les résultats de calcul de la fonction calculée sont mis en cache et ne seront recalculés que lorsque les données dont elle dépend changent. 🎜🎜3. Code concis : étant donné que la fonction calculée détecte automatiquement les changements de données, nous n'avons pas besoin de spécifier à l'avance les données dépendantes de l'attribut calculé. Cela peut grandement simplifier notre code. 🎜🎜Résumé🎜🎜La fonction calculée est une méthode de valeur de données très utile dans Vue.js. Il nous permet de calculer et de mettre à jour les données plus facilement et présente de grands avantages en termes de simplicité et de performances du code. Si vous êtes nouveau sur Vue.js, il est recommandé de maîtriser d'abord l'utilisation des fonctions calculées lors de l'apprentissage du framework Vue.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!