Vue で計算プロパティを使用する際の知識ポイントのまとめ

計算されたプロパティ

場合によっては、テンプレートにロジックを詰め込みすぎると、テンプレートが重くなりすぎて保守が困難になることがあります。例えば：

<div id="アプリ">
  {{ message.split('').reverse().join('') }}
</div>

この場合、変数メッセージの逆文字列を表示したいということに気づくまでに、しばらく見なければなりません。さらに、テンプレート内で逆文字列を複数回使用したい場合、さらに面倒になります。したがって、複雑なロジックを扱う場合は、計算プロパティを使用する必要があります。

基本的な使い方

計算プロパティは Vue 構成オブジェクト内のプロパティであり、次のように使用されます。

<div id="アプリ">
   <!-- 計算属性の値はデータのように直接使用できます -->
  {{ 一部計算済み }}
</div>
定数vm = 新しいVue({
  el: '#app',
  計算: {
     // 返される値は計算された属性の値です someComputed() {
      「いくつかの値」を返す
    }
  }
})

たとえば、文字列の逆順の文字列を取得したい場合は、計算プロパティを使用して実行できます。

<div id="アプリ">
  <p>元の文字列: "{{ msg }}"</p>
  <p>文字を逆にする: "{{reversedMsg }}"</p>
</div>
定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは'
  },
  計算: {
    逆メッセージ: 関数 () {
      this.msg.split('').reverse().join(''); を返します。
    }
  }
})

riversedMsg の値は msg の値に依存するため、msg の値を変更すると riversedMsg の値も変更されることがわかります。

計算プロパティとメソッド

実際、上記の機能は次のような方法でも実現できます。

<div id="アプリ">
  <p>元の文字列: "{{ msg }}"</p>
  <p>文字列を反転: "{{reverseMsg() }}"</p>
</div>
定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは'
  },
  メソッド: {
    逆メッセージ: 関数 () {
      this.msg.split('').reverse().join(''); を返します。
    }
  }
})

式でメソッドを呼び出すことで同じ効果が得られますが、計算プロパティの使用とメソッドの使用には根本的な違いがあります。メソッドを使用する場合、ページが再レンダリングされるたびに、対応するメソッドが 1 回再実行されます。例:

<div id="アプリ">
  <p>{{ 名前 }}</p>
  <p>{{ 逆メッセージ() }}</p>
</div>
定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは',
    名前: 'shanshan'
  },
  メソッド: {
    逆メッセージ: 関数 () {
      console.log('メソッドが実行されました');
      this.msg.split('').reverse().join(''); を返します。
    }
  }
})
vm.name = 'duyi';

上記の例では、name の値が変更されると、ページが再レンダリングされることがわかります。この時点で、コンソールに「メソッドが実行されました」という文字列が出力され、reversedMsg 関数が実行されたことを示しています。ただし、変更されたデータはこの関数とは関係がないため、このメソッドを実行する必要はありません。この関数のロジックが非常に複雑な場合は、パフォーマンスの消費にもなります。

ただし、計算されたプロパティを使用すると、次のような現象は発生しません。

定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは',
    名前: 'shanshan'
  },
  計算: {
    逆メッセージ: 関数 () {
      console.log('計算が実行されました');
      this.msg.split('').reverse().join(''); を返します。
    }
  }
})
vm.name = 'duyi';

この時点で、データ名が再割り当てされると、計算プロパティが実行されないことがわかります。したがって、計算プロパティとメソッドの最も重要な違いは、計算プロパティが応答性のある依存関係に基づいてキャッシュされることです。計算プロパティの値は常にキャッシュに保存されます。依存するデータが変更されない限り、計算プロパティにアクセスするたびに、関数が再度実行されるのではなく、キャッシュされた結果がすぐに返されます。このメソッドは、再レンダリングがトリガーされるたびに、常に関数を再度実行します。

では、なぜキャッシュが必要なのでしょうか?

巨大な配列を走査し、膨大な計算を実行する必要がある計算プロパティ A があるとします。次に、この計算されたプロパティ A を使用する必要があります。キャッシュがない場合、A の関数を再度実行するため、パフォーマンスのオーバーヘッドが非常に大きくなります。

計算プロパティの詳細

計算プロパティは、関数として記述できるだけでなく、ゲッターとセッターという 2 つのプロパティを持つオブジェクトとして記述することもできます。どちらのプロパティも関数です。記述方法は次のとおりです。

定数vm = 新しいVue({
  el: '#app',
  計算: {
    フルネーム：
      ゲッター（）{
         // コードの一部},
      セッター（）{
         // コード }
    }
  }
})

ゲッターリード

先ほど、計算プロパティを関数、つまりゲッター関数として直接記述しました。つまり、計算プロパティにはデフォルトでゲッターのみが含まれます。ゲッターの this は自動的に Vue インスタンスにバインドされます。

いつ実行するか?

計算プロパティを取得すると、get 関数が実行されます。

定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは'
  },
  計算: {
    逆メッセージ: {
      ゲッター（）{
        this.msg.split('').reverse().join(''); を返します。
      }
    }
  }
})

セッター設定

オプションで、計算プロパティが再割り当てされるときに set 関数が実行されます。パラメータ: リセットする値。 setter の this は自動的に Vue インスタンスにバインドされます。

定数vm = 新しいVue({
  el: '#app',
  データ： {
    メッセージ: 'こんにちは',
    firstStr: ''
  },
  計算: {
    逆メッセージ: {
      ゲッター（）{
        this.msg.split('').reverse().join(''); を返します。
      },
      セッター(newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

計算プロパティに値が割り当てられていても、その値は変更されないことに注意してください。繰り返しますが、計算プロパティは、依存するレスポンシブプロパティが変更された場合にのみ再計算されます。

エクササイズ名フィルター

人Arr: [
  { 
    名前： ''、 
    ソース: '.jpg', 
    des: 「頸椎が悪い」、 
    性別: 'm'、 
    識別子: '056482'
  },
  { 
    名前： ''、 
    ソース: '.jpg', 
    des: 「私は誰だ」 
    性別: 'f', 
    識別子: '157894'
  },
  { 
    名前： ''、 
    src: '.jpg', des: '私はとてもかっこいい', 
    性別: 'f', 
    id: '2849245'
  },
  { 
    名前： ''、 
    ソース: '.jpeg', 
    des: 「あなたは変な顔を見たことがない」 
    性別: 'm'、 
    識別子: '348515'
  },
  { 
    名前： ''、 
    ソース: '.jpeg', 
    des: 'Guapi Liu'、 
    性別: 'm'、 
    識別子: '478454'
  }
]

練習_すべての製品を選択

コースリスト: [
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 1299、
    カート: 1,
    id: 0
  },
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 1148,
    カート: 1,
    id: 1595402664708
  },
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 1,
    カート: 1,
    id: 1596305473062
  },
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 1,
    カート: 1,
    id: 1595413512182
  },
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 12798、
    カート: 1,
    id: 1596302161181
  },
  {
    ポスター: '.jpg',
    タイトル： ''、
    価格: 1,
    カート: 1,
    id: 1596300025301,
  },
]

知識ポイントの拡張:

インスタンスのスケーリング

<div id="app1"></div>

    <div id="app2">
        {
<!-- -->{reverseMes}}
    </div>
vm1 = new Vue({
            el:'#app1',
            データ：{
                mes:'こんにちは'
            }
        })

        vm2 = new Vue({
            el:'#app2',
            計算: {
                逆Mes(){
                    // インスタンス vm1 のデータセンターの mes を使用して文字列を反転します。 return vm1.mes.split('').reverse().join('')
                }
            }
        })

インスタンスvm1とvm2のデータは、プロパティを計算するためにも使用できます。

カスタム計算プロパティは、補間式で使用されるだけでなく、v-bind: 属性バインディングでスタイルの変更などを実行するためにも使用できます。

以上が、Vue で計算プロパティを使用する際の注意点の詳細なまとめです。Vue で計算プロパティを使用する方法の詳細については、123WORDPRESS.COM 内の他の関連記事にも注目してください。

以下もご興味があるかもしれません: