Parlons des propriétés calculées dans Vue

1. Attribut calculé calculé

1.1. Ce qui est un attribut calculé calculé

⭐⭐
est basé sur son cache de dépendances et ne sera mis à jour que lorsque ses dépendances associées changent. La documentation officielle dit ceci : pour toute logique complexe contenant des données réactives, vous devez utiliser des propriétés calculées. (Partage vidéo d'apprentissage : tutoriel vidéo Vue)

1.2. Traitement de données complexes - calculé

⭐⭐
L'épissage des chaînes, la réussite du score et l'enregistrement du message d'un morceau de texte, ceci est mis en œuvre à l'aide du calcul

<div id="app">
      <!-- 插值语法表达式直接进行拼接 -->
      <!-- 1.拼接姓名 -->
      <h2>{{fullname}}</h2>

      <!-- 2.显示分数及格或不及格 -->
      <h2>{{scorelevel}}</h2>

      <!-- 3.反转单词 -->
      <!-- reverse针对于数组，先用split转为数组，在用reverse -->
      <h2>{{reversetext}}</h2>
    </div>
    <script src="../lib/vue.js"></script>
    <script>
      const app = Vue.createApp({
        data() {
          return {
            // name
            firstName: "kk",
            lastName: "cc",

            // score
            score: 99,

            // 文本中单词反转
            message: "I love stydy Vue3",
          };
        },
        computed: {
          fullname() {
            return this.firstName + " " + this.lastName;
          },
          scorelevel() {
            return this.score >= 60 ? "及格" : "不及格";
          },
          reversetext() {
            return this.message.split(" ").reverse().join(" ");
          },
        },
      });
      app.mount("#app");

Bien sûr, nous pouvons également utiliser la syntaxe et les méthodes d'interpolation Moustache, mais pour le traitement de données complexes, nous utilisons souvent le calcul, la méthode d'écriture est plus claire et les attributs calculés sont mis en cache

Cache des attributs calculés.

⭐⭐

• seront mis en cache en fonction de leurs dépendances ;
• Lorsque les données ne changent pas, les attributs calculés n'ont pas besoin d'être recalculés
• Mais si les données dépendantes changent, les attributs calculés seront toujours utilisés ; lors de leur utilisation Recalculer ;

&tinsp;
C'est pourquoi nous préférons le calcul lors du traitement de données complexes

• Lorsque nous utilisons le même nombre de noms complets, les méthodes sont exécutées trois fois et calculées une fois. C'est précisément à cause du calcul. L'attribut de calcul sera mis en cache
  

1.4. Les setters et getters calculés d'attribut calculé

⭐⭐
Dans la plupart des cas, les attributs calculés ne nécessitent qu'une seule méthode getter, puis à ce moment l'attribut calculé valeur d'attribut Pour les fonctions

Si nous voulons définir la valeur d'une propriété calculée, nous pouvons définir une méthode de définition pour la propriété calculée

computed: {
          // 语法糖
          fullname() {
            return this.firstname + " " + this.lastname;
          },

          // 完整写法
          fullname: {
            get: function () {
              return this.firstname + " " + this.lastname;
            },
            set: function (value) {
              const names = value.split(" ");
              this.firstname = names[0];
              this.lastname = names[1];
            },
          },

[Tutoriels vidéo associés recommandés : Tutoriel d'introduction à vuejs, Introduction au front Web- fin]

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!