Vue.js で計算された Happy ファイルのプロパティ

Vue.js で計算されたプロパティ

計算されたプロパティのキーワード: 計算された。

計算されたプロパティは、複雑なロジックを扱う場合に役立ちます。

文字列を反転する次の例を参照してください。

例1

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

例 1 のテンプレートは非常に複雑になり、理解するのが簡単ではありません。

次に、計算されたプロパティの使用例を見てみましょう。

例 2

<div id="app">
  <p>原始字符串: {
   
   { message }}</p>
  <p>计算后反转字符串: {
   
   { reversedMessage }}</p>
</div>
 
<script>
var vm = new Vue({
  el: '#app',
  data: {
    message: 'Runoob!'
  },
  computed: {
    // 计算属性的 getter
    reversedMessage: function () {
      // `this` 指向 vm 实例
      return this.message.split('').reverse().join('')
    }
  }
})
</script>

インスタンス 2 は、計算プロパティ reversedMessage を宣言します。

提供された関数は、プロパティ vm.reversedMessage のゲッターとして使用されます。

vm.reversedMessage は vm.message に依存しており、vm.message が変更されると vm.reversedMessage も更新されます。

---

計算とメソッドの比較

computed を置き換えるメソッドを使用できます。どちらも実質的には同じですが、computed は依存関係キャッシュに基づいており、関連する依存関係が変更された場合にのみ値が再フェッチされます。メソッドを使用すると、再レンダリング時に関数が必ず再度呼び出されます。

例 3

methods: {
  reversedMessage2: function () {
    return this.message.split('').reverse().join('')
  }
}

おそらく、computed を使用するとパフォーマンスが向上しますが、キャッシュしたくない場合は、methods 属性を使用できます。

---

計算されたセッター

計算されたプロパティにはデフォルトでゲッターのみが含まれますが、必要に応じてセッターを提供することもできます。

例 4

var vm = new Vue({
  el: '#app',
  data: {
    name: 'Google',
    url: 'http://www.google.com'
  },
  computed: {
    site: {
      // getter
      get: function () {
        return this.name + ' ' + this.url
      },
      // setter
      set: function (newValue) {
        var names = newValue.split(' ')
        this.name = names[0]
        this.url = names[names.length - 1]
      }
    }
  }
})
// 调用 setter， vm.name 和 vm.url 也会被对应更新
vm.site = '菜鸟教程 http://www.kxdang.com/topic/';
document.write('name: ' + vm.name);
document.write('<br>');
document.write('url: ' + vm.url);

例の実行結果から、 vm.site = 'Cainiao Tutorial http://www.kxdang.com/topic/'; を実行すると、setter が呼び出され、それに応じて vm.name と vm.url が更新されます。 。