vue の計算プロパティの詳細な説明-jsチュートリアル-php.cn

vue の計算プロパティの詳細な説明

php中世界最好的语言

リリース： 2018-04-11 13:50:23

オリジナル

1861 人が閲覧しました

今回は、vue 計算プロパティについて詳しく説明します。vue 計算プロパティを使用する際の注意事項は何ですか?実際のケースを見てみましょう。

1. 計算属性とは何ですか

テンプレート内の

式は非常に便利ですが、簡単な操作向けに設計されています。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。例:

<p id="example">
 {{ message.split('').reverse().join('') }}
</p>

ログイン後にコピー

ここの式には 3 つの操作が含まれていますが、あまり明確ではないため、複雑なロジックに遭遇した場合は、それを処理するために計算された Vue の特別な計算属性を使用する必要があります。

2. 計算された属性の使用法

最終的に結果が返される限り、演算、関数呼び出しなどのさまざまな複雑なロジックを計算属性で完了できます。

計算されたプロパティを使用して上記の例を書き直してみましょう

<p id="example">
 <p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>  //我们把复杂处理放在了计算属性里面了
</p>
var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

ログイン後にコピー

結果:

元のメッセージ: 「こんにちは」

計算された反転メッセージ: 「olleH」

上記の例の単純な使用法に加えて、計算されたプロパティは複数の Vue インスタンスのデータに依存することもでき、データが変更されると、計算されたプロパティが再実行され、ビューが更新されます。

りー

計算プロパティについては、見落とされがちな非常に実用的なヒントが 2 つあります。1 つ目は、計算プロパティは他の計算プロパティに依存する可能性があること、2 つ目は、計算プロパティは現在の Vue インスタンスのデータだけでなく、他の計算プロパティのデータにも依存することです。例:

<body>
  <p id="app">
    <button @click="add()">补充货物1</button>
    <p>总价为：{{price}}</p>
  </p>
</body>
var app = new Vue({    
    el: '#app', 
  data: {
    package1: {
      count: 5,
      price: 5
    },
    package2: {
      count: 10,
      price: 10
    }
  },
  computed: {
   price: function(){
     return this.package1.count*this.package1.price+this.package2.count*this.package2.price  //总价随着货物或价格的改变会重新计算
   }
  },
  methods: {  //对象的方法
    add: function(){
      this.package1.count++
    }
  }
});

ログイン後にコピー

それぞれの計算プロパティにはゲッターとセッターが含まれており、読み取りにゲッターのみを使用する計算プロパティのデフォルトの使用例です。

必要に応じて、通常のデータを変更するのと同じように計算された属性の値を手動で変更する場合、setter 関数がトリガーされ、次のようなカスタム操作が実行されます。ほとんどの場合、計算されたプロパティを読み取るためにデフォルトの getter メソッドのみを使用します。Setter がビジネスで使用されることはほとんどないため、計算されたプロパティを宣言する場合は、宣言された getter と setter を組み合わせることなく、デフォルトの書き込みメソッドを直接使用できます。。

3. 計算された属性キャッシュ

上記の例では、計算されたプロパティを使用することに加えて、次のような式でメソッドを呼び出すことによっても同じ効果を達成できます。同じ関数を計算されたプロパティの代わりにメソッドとして定義することもでき、どちらの方法でも最終結果はまったく同じになります。 1 つはを使用して値を取得し、もう 1 つは reverseTitle を使用して値を取得します。

ただし、計算されたプロパティが依存関係に基づいてキャッシュされるという点が異なります。計算されたプロパティは、関連する依存関係が変更された場合にのみ再評価されます。

つまり、タイトルが変更されていない限り、 reverseTitle 計算プロパティに複数回アクセスすると、関数を再度実行することなく、すぐに前の計算結果が返されます。 reverseTitle()

小さな例:

 <p id="app1"></p>
  <p id="app2">{{ reverseText}}</p>
var app1 = new Vue({
  el: '#app1',
 data: {
   text: 'computed'
  }
});
var app2 = new Vue({
  el: '#app2',
  computed: {
    reverseText: function(){
      return app1.text.split('').reverse().join(''); //使用app1的数据进行计算
    }
  }
});

ログイン後にコピー

対照的に、呼び出しメソッドは、再レンダリングがトリガーされるたびに、常に関数を再度実行します。

なぜキャッシュが必要なのでしょうか?巨大な配列を走査して多くの計算を行う必要がある、計算コストの高いプロパティ A があるとします。その場合、 A に依存する他の計算されたプロパティがある可能性があります。

キャッシュがなければ、必然的に A のゲッターを複数回実行することになります。キャッシュしたくない場合は、代わりにメソッドを使用してください。

Vue 計算プロパティの使用法を見てみましょう

var vm = new Vue({
  el: '#demo',
  data: {
    firstName: 'Foo',
    lastName: 'Bar'
  },
  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];
      }
    }
  }
});
//现在再运行 vm.fullName = 'John Doe' 时，setter 会被调用，vm.firstName 和 vm.lastName 也会相应地被更新。

ログイン後にコピー

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。！推奨書籍:

Vue の初心者向けチュートリアル

webpack のモバイル側自動ビルドレムメソッドの詳細な説明

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