Explication détaillée des fonctions de propriété calculées dans la documentation Vue

Vue.js est un framework front-end populaire qui fournit de nombreuses fonctions et composants facilitant le développement. L'une des fonctionnalités très importantes est la fonction de propriété calculée. Les attributs calculés peuvent calculer dynamiquement une nouvelle valeur d'attribut basée sur les données, évitant ainsi d'avoir à calculer directement des expressions complexes dans le modèle. Cet article présentera en détail les fonctions de propriété calculées dans le document Vue.

1. Définition et utilisation des propriétés calculées

La propriété calculée est une propriété spéciale dans Vue, et sa valeur est une fonction. Un exemple de définition d'une propriété calculée dans un objet instance Vue :

var vm = new Vue({
  data: {
    message: 'Hello World'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

Dans le code ci-dessus, une propriété calculée reversedMessage est définie dans l'objet instance Vue. Sa valeur est une fonction et elle renvoie un Reversed. message. reversedMessage，它的值是一个函数，返回的是一个经过反转的消息。

计算属性可以在模板中像数据属性一样使用，例：

<div id="app">
  <p>Original message: {{ message }}</p>
  <p>Reversed message: {{ reversedMessage }}</p>
</div>

在渲染的时候，“Original message:”和“Reversed message:”会分别显示“Hello World”和“dlroW olleH”。

二、计算属性的缓存

计算属性有一个很重要的特性，就是对于相同的输入返回相同的输出，所以它们被缓存了起来。例如，在上述示例中，只要message没有改变，多次使用reversedMessage都会返回相同的字符串。

这个特性在模板中使用计算属性的时候非常有用，因为它避免了在模板中重复计算复杂的表达式。

三、计算属性的getter和setter

在计算属性中，getter函数是必须的，它定义了计算属性的输出值。在一些情况下，你可能需要添加一个setter函数，它定义了计算属性的输入值。

例如，我们可以定义一个计算属性fullName，它的getter返回一个拼接了firstName和lastName的字符串，setter可以分离fullName的内容为firstName和lastName。

var vm = new Vue({
  data: {
    firstName: 'John',
    lastName: 'Doe'
  },
  computed: {
    fullName: {
      // Getter
      get: function () {
        return this.firstName + ' ' + this.lastName
      },
      // Setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[names.length - 1]
      }
    }
  }
})

在上述代码中，我们可以通过fullName的getter获取当前的全名，也可以通过setter设置新的全名。例如：

console.log(vm.fullName) // John Doe

vm.fullName = 'Jane Smith'
console.log(vm.firstName) // Jane
console.log(vm.lastName) // Smith

四、计算属性的实时计算

计算属性是对数据属性进行实时计算的最好方法。Vue在数据属性改变后，它会在下一次需要渲染模板的时候计算新的计算属性的值。如果计算属性依赖的数据没有改变，计算属性就会使用之前缓存的值。

var vm = new Vue({
  data: {
    radius: 5
  },
  computed: {
    diameter: function () {
      return this.radius * 2
    },
    circumference: function () {
      return 2 * Math.PI * this.radius
    }
  }
})

在上述代码中，我们定义了一个计算属性diameter和circumference，它们都依赖于radius属性。当radius属性改变时，这些计算属性会重新计算。例如：

console.log(vm.diameter) // 10

vm.radius = 10
console.log(vm.circumference) // 62.83185307179586

五、计算属性和方法的区别

在Vue中，有一个很相似的概念叫做方法，方法可以在模板中用v-on指令来调用。方法和计算属性都可以根据数据属性的变化来改变它们的值。

那么方法与计算属性的区别在哪里呢？

首先，与计算属性不同，方法总是会重新计算，并不能像计算属性一样缓存它们的结果。方法通常适用于需要每次重新计算的复杂逻辑或需要传入特定参数的逻辑。

其次，计算属性只有getter，而方法只有setter。虽然方法可以返回一个值，但是这个返回值并不会被缓存。

最后，计算属性可以像数据属性一样方便地在模板中使用，而对于方法必须使用v-on

Les propriétés calculées peuvent être utilisées dans des modèles comme les propriétés de données, par exemple :

rrreee

Lors du rendu, "Message original :" et "Message inversé :" afficheront respectivement "Hello World" et "dlroW olleH".

2. Mise en cache des attributs calculés🎜🎜Les attributs calculés ont une fonctionnalité très importante, qui est de renvoyer la même sortie pour la même entrée, ils sont donc mis en cache. Par exemple, dans l'exemple ci-dessus, plusieurs utilisations de reversedMessage renverront la même chaîne tant que le message n'a pas changé. 🎜🎜Cette fonctionnalité est très utile lors de l'utilisation de propriétés calculées dans des modèles, car elle évite de calculer à plusieurs reprises des expressions complexes dans le modèle. 🎜🎜3. Getters et setters d'attributs calculés🎜🎜Dans les attributs calculés, la fonction getter est nécessaire, qui définit la valeur de sortie de l'attribut calculé. Dans certains cas, vous devrez peut-être ajouter une fonction de définition qui définit la valeur d'entrée de la propriété calculée. 🎜🎜Par exemple, nous pouvons définir une propriété calculée fullName, dont le getter renvoie une chaîne concaténée avec firstName et lastName, et le setter peut être séparés Le contenu de fullName est firstName et lastName. 🎜rrreee🎜Dans le code ci-dessus, nous pouvons obtenir le nom complet actuel via le getter de fullName, ou définir le nouveau nom complet via le setter. Par exemple : 🎜rrreee🎜4. Calcul en temps réel des attributs calculés🎜🎜Les attributs calculés sont le meilleur moyen d'effectuer des calculs en temps réel sur les attributs de données. Une fois que Vue a modifié l'attribut data, il calculera la valeur du nouvel attribut calculé la prochaine fois qu'il aura besoin de restituer le modèle. Si les données dont dépend la propriété calculée n'ont pas changé, la propriété calculée utilisera la valeur précédemment mise en cache. 🎜rrreee🎜Dans le code ci-dessus, nous définissons une propriété calculée diamètre et circonférence, qui dépendent toutes deux de la propriété radius. Ces propriétés calculées sont recalculées lorsque la propriété radius change. Par exemple : 🎜rrreee🎜 5. La différence entre les propriétés calculées et les méthodes 🎜🎜Dans Vue, il existe un concept très similaire appelé méthode. Les méthodes peuvent être appelées dans les modèles à l'aide de la directive v-on. Les méthodes et les propriétés calculées peuvent modifier leurs valeurs en fonction des modifications apportées aux propriétés des données. 🎜🎜Alors quelle est la différence entre les méthodes et les propriétés calculées ? 🎜🎜Tout d'abord, contrairement aux propriétés calculées, les méthodes sont toujours recalculées et leurs résultats ne peuvent pas être mis en cache comme les propriétés calculées. Les méthodes conviennent généralement aux logiques complexes qui doivent être recalculées à chaque fois ou aux logiques qui nécessitent de transmettre des paramètres spécifiques. 🎜🎜Deuxièmement, les propriétés calculées n'ont que des getters, tandis que les méthodes n'ont que des setters. Bien qu'une méthode puisse renvoyer une valeur, la valeur de retour n'est pas mise en cache. 🎜🎜Enfin, les propriétés calculées peuvent être utilisées dans les modèles aussi facilement que les propriétés de données, tandis que les méthodes doivent être appelées à l'aide de la directive v-on. Si vous souhaitez afficher la valeur d'une propriété calculée dans un modèle, utiliser une propriété calculée est un meilleur choix. 🎜🎜6. Résumé🎜🎜Dans Vue, les propriétés calculées sont le meilleur moyen de calculer les propriétés des données en temps réel. Il possède des caractéristiques de mise en cache, évite les calculs répétés, peut mettre en œuvre une logique métier complexe et améliore la lisibilité et la maintenabilité du code. Dans le même temps, les propriétés calculées peuvent également fournir des fonctions getter et setter, nous permettant d'exploiter librement les propriétés calculées. Contrairement aux propriétés calculées, les méthodes sont toujours recalculées, ce qui convient à la logique qui doit être recalculée à chaque fois ou à la logique qui doit transmettre des paramètres. Pour une logique qui nécessite souvent des calculs, il est recommandé d'utiliser des propriétés calculées. 🎜

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!