vueの計算プロパティと使い方の詳しい説明

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

1. 計算属性とは

テンプレート内の式

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

<p>
 {{ message.split('').reverse().join('') }}
</p>

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

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

計算された属性を使用して上記の例を書き直してみましょう

<p>
 </p><p>Original message: "{{ message }}"</p>
 <p>Computed reversed message: "{{ reversedMessage }}"</p>　　//我们把复杂处理放在了计算属性里面了

var vm = new Vue({
  el: '#example',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
});

結果:

元のメッセージ: "Hello"

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

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

  <p>
    <button>补充货物1</button>
    </p><p>总价为：{{price}}</p>
  

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++
    }
  }
});

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

 <p></p>
  <p>{{ 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的数据进行计算
    }
  }
});

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

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

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

上の例では、計算された属性を使用することに加えて、次のような式でメソッドを呼び出すことによっても同じ効果を達成できます:

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 也会相应地被更新。

同じ関数を定義できます計算されたプロパティではなくメソッドであるため、両方のアプローチの最終結果はまったく同じになります。 1 つは

を使用して値を取得し、もう 1 つは reverseTitle を使用して値を取得します。

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

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

小さな例:

<p>{{reverseTitle()}}</p>
// 在组件中
methods: {
 reverseTitle: function () {
  return this.title.split('').reverse().join('')
 }
}

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

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

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

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

<p>{{reverseTitle}}</p>
    <p>{{reverseTitle1()}}</p>
    <button>补充货物1</button>
    <p>总价为：{{price}}</p>
  computed: {
   reverseTitle: function(){
     return this.title.split('').reverse().join('')　　//而使用计算属性，只要title没变，页面渲染是不会重新进这里来计算的，而是使用了缓存。
   },
   price: function(){
     return this.package1.count*this.package1.price+this.package2.count*this.package2.price
   }
  },
  methods: {  //对象的方法
    add: function(){
      this.package1.count++
    },
    reverseTitle1: function(){
      return this.title.split('').reverse().join('')　　//点击补充货物，也会进这个方法，再次计算。不是刷新，而是只要页面渲染，就会进方法里重新计算。
    }
  },

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、他の関連するコンテンツに注目してください。 PHP 中国語 Web サイトの記事をご覧ください。 推奨読書:

vue axiosリクエストのタイムアウトに対処する方法

webpackでスキャフォールディングの最適化を実装する方法

Webpack v4のdevからprdまでの詳細な手順

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