Vue のメソッドと計算値の比較質問する

Question

計算された値とメソッドは Vue では非常に異なり、ほとんどの場合、互換性がありません。

計算プロパティ

計算値のより適切な名前は計算プロパティ実際、Vue がインスタンス化されると、計算プロパティはゲッターと場合によってはセッターを持つ Vue のプロパティに変換されます。基本的に、計算値は、計算に使用される基礎となる値の 1 つが更新されるたびに自動的に更新される派生値と考えることができます。計算値を呼び出すことはなく、パラメーターも受け入れません。計算プロパティは、データプロパティと同じように参照します。以下は、ドキュメンテーション:

computed: {
  // a computed getter
  reversedMessage: function () {
    // `this` points to the vm instance
    return this.message.split('').reverse().join('')
  }
}

これは DOM 内で次のように参照されます。

<p>Computed reversed message: "{{ reversedMessage }}"</p>

計算値は、Vue 上に存在するデータを操作するのに非常に役立ちます。データをフィルタリングまたは変換する必要がある場合は、通常、その目的で計算値を使用します。

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.names.filter(n => n.startsWith("B"))
    }
}

<p v-for="name in startsWithB">{{name}}</p>

計算された値は、変更されていない場合に再計算する必要のない値を繰り返し計算することを避けるためにキャッシュされます (たとえば、ループ内にない場合など)。

方法

メソッドは、Vue インスタンスにバインドされた関数です。明示的に呼び出された場合にのみ評価されます。すべての JavaScript 関数と同様に、パラメータを受け入れ、呼び出されるたびに再評価されます。メソッドは、関数が役立つのと同じ状況で役立ちます。

data:{
    names: ["Bob", "Billy", "Mary", "Jane"]
},
computed:{
    startsWithB(){
        return this.startsWithChar("B")
    },
    startsWithM(){
        return this.startsWithChar("M")
    }
},
methods:{
    startsWithChar(whichChar){
        return this.names.filter(n => n.startsWith(whichChar))
    }
}

Vueのドキュメンテーション本当に良くてアクセスも簡単です。お勧めです。

Answer 1