Vue の計算プロパティについて話しましょう

1. 計算属性 computed

1.1. 計算属性 computed とは

#⭐⭐
計算された値は依存関係キャッシュに基づいており、関連する依存関係が変更された場合にのみ更新されます。公式ドキュメントには次のように書かれています: リアクティブ データを含む複雑なロジックでは、計算されたプロパティを使用する必要があります。 (学習ビデオ共有: vue ビデオ チュートリアル )

1.2. 複雑なデータ処理 - 計算済み

⭐⭐
文字列の結合、スコアが合格かどうか、メッセージはテキストの一部を記録します。ここでは、computed

<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");

を使用して実装されています。もちろん、Mustache 補間構文とメソッドを使用することもできますが、複雑なデータの処理用です。 , 計算済みをよく使用します。記述方法が明確になり、計算された属性がキャッシュされます

#1.3. 計算された属性のキャッシュ

#⭐⭐

依存関係に基づいてキャッシュされます;
データが変更されない場合、計算されたプロパティを再計算する必要はありません;
ただし、依存関係にあるデータが変更された場合、使用され、計算されたプロパティ 引き続き再計算されます;

&tinsp;

これが、計算された

• を同じ回数使用することを好む理由です。複雑なデータを処理する場合 fullName を使用すると、メソッドが 3 回実行され、computed が 1 回実行されます。これは、計算されたプロパティがキャッシュされるためです。

  
  

  #1.4. 計算プロパティのセッターとゲッター

⭐⭐
ほとんどの場合、計算プロパティには 1 つのゲッター メソッドのみが必要で、その後に計算プロパティが必要になります。プロパティ値は関数の場合です。

計算されたプロパティの値を設定したい場合は、計算されたプロパティの setter メソッドを設定できます。

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];
            },
          },

[関連ビデオ チュートリアルの推奨事項:
vuejs 入門チュートリアル、

Web フロントエンドの入門
]

以上がVue の計算プロパティについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。