Vue で計算プロパティを使用する方法を 1 つの記事で学習します

Vue を使用してプロパティを計算するタイミングを知っていますか?計算されたプロパティを使用するにはどうすればよいですか?次の記事では、Vue 計算プロパティについて理解し、Vue 計算プロパティの基本的な使用方法を紹介します。

計算されたプロパティ

テンプレートにロジックを入れすぎて、テンプレートが重くなりすぎて保守が困難になる場合があります。例:

<div id="app">
  {{ message.split(&#39;&#39;).reverse().join(&#39;&#39;) }}
</div>

このような状況では、変数メッセージを表示する反転された文字列がここにあることを理解するために、しばらく見てみる必要があります。反転された文字を使用したい場合は、テンプレート内で複数回文字列を張る場合はさらに面倒になります。したがって、複雑なロジックを扱う場合は、計算されたプロパティを使用する必要があります。 [関連する推奨事項: "vue.js チュートリアル"]

基本的な使用法

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

<div id="app">
   <!-- 计算属性的值可以像data数据一样，直接被使用 --> 
  {{ someComputed }}
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  computed: {
     // 返回的值，就是计算属性的值
    someComputed () {
      return &#39;some values&#39;
    }
  }
})

たとえば、文字列の反転文字列を取得したい場合は、計算されたプロパティを使用してそれを行うことができます:

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符处啊: "{{ reversedMsg }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  computed: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

reversedMsg の値が依存していることがわかります。 msg 値に依存するため、msg の値を変更すると、それに応じて reversedMsg の値も変更されます。

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

実際、上記の関数は、次のようなメソッドを使用して実現することもできます。式 メソッドでも同じ効果を実現できますが、計算されたプロパティを使用することとメソッドを使用することには本質的な違いがあります。メソッドを使用する場合、ページが再レンダリングされるたびに、次のような対応するメソッドが再実行されます。

<div id="app">
  <p>原始字符串: "{{ msg }}"</p>
  <p>翻转字符串: "{{ reversedMsg() }}"</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;
  },
  methods: {
    reversedMsg: function () {
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})

上の例では、name の値が変更されると、この時点では、メソッド実行文字列がコンソールに表示されます。これは、reversedMsg 関数が実行されたことを意味しますが、変更されたデータは何の関係もないため、このメソッドを実行する必要はありません。この関数内のロジックが非常に複雑な場合、パフォーマンスの点でも消費になります。

しかし、計算属性を使用すると、次のような現象は発生しません。

<div id="app">
  <p>{{ name }}</p>
  <p>{{ reversedMsg() }}</p>
</div>
const vm = new Vue({
  el: &#39;#app&#39;,
  data: {
    msg: &#39;Hello&#39;,
    name: &#39;shanshan&#39;
  },
  methods: {
    reversedMsg: function () {
      console.log(&#39;方法执行啦&#39;);
      return this.msg.split(&#39;&#39;).reverse().join(&#39;&#39;);
    }
  }
})
vm.name = &#39;duyi&#39;;

この時点で、データ名を再割り当てすると、計算属性が実行されないことがわかります。 。したがって、計算プロパティとメソッドの最も重要な違いは次のとおりです:

計算プロパティは応答性の依存関係に基づいてキャッシュされます

. 計算プロパティの値は、それが依存するデータが存在する限り、常にキャッシュに格納されます。計算されたプロパティにアクセスするたびに、関数を再度実行するのではなく、キャッシュされた結果がすぐに返されます。このメソッドは毎回再レンダリングをトリガーし、メソッドを呼び出すと常に関数が再度実行されます。 それでは、なぜキャッシュが必要なのでしょうか?

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

詳細な計算プロパティ

計算プロパティは、関数として記述するだけでなく、オブジェクトとしても記述することができます。オブジェクトには 2 つのプロパティがあります。 getter&setter はどちらも関数であり、次のように記述します。

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    name: 'shanshan'
  },
  computed: {
    reversedMsg: function () {
      console.log('计算执行啦');
      return this.msg.split('').reverse().join('');
    }
  }
})
vm.name = 'duyi';

getter reading

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

いつ実行されますか?

計算された属性を取得すると、get 関数が実行されます。

const vm = new Vue({
  el: '#app',
  computed: {
    fullName: {
      getter () {
         // 一些代码
      },
      setter () {
         // 一些代码
      }
    }
  }
})

setter 設定

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

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello'
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      }
    }
  }
})

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

Practice_Name フィルタリング

const vm = new Vue({
  el: '#app',
  data: {
    msg: 'Hello',
    firstStr: ''
  },
  computed: {
    reversedMsg: {
      getter () {
        return this.msg.split('').reverse().join('');
      },
      setter (newVal) {
        this.firstStr = newVal[0];
      }
    }
  }
})

Practice_すべての製品を選択

personArr: [
  { 
    name: '', 
    src: '.jpg', 
    des: '颈椎不好', 
    sex: 'm', 
    id: '056482' 
  },
  { 
    name: '', 
    src: '.jpg', 
    des: '我是谁', 
    sex: 'f', 
    id: '157894' 
  },
  { 
    name: '', 
    src: '.jpg', des: '我长得很好看', 
    sex: 'f', 
    id: '2849245' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '你没有见过陌生的脸', 
    sex: 'm', 
    id: '348515' 
  },
  { 
    name: '', 
    src: '.jpeg', 
    des: '瓜皮刘', 
    sex: 'm', 
    id: '478454'
  }
]

プログラミング関連の知識について詳しくは、

プログラミング入門

をご覧ください。 ！

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