[解決済み】Vueのメソッドと計算されたものの比較

質問

との主な違いは何ですか？ methods と computed の値は、Vue.jsで？

同じように見え、交換可能です。

解決方法は？

Vueでは、計算値とメソッドは非常に異なっており、ほとんどの場合、間違いなく互換性がありません。

計算されたプロパティ

計算値のより適切な名称は コンピュ-テッドプロパティ . 実際、Vueがインスタンス化されるとき、computedプロパティはVueのプロパティに変換され、ゲッターと、時にはセッターを持つようになります。基本的に、計算された値は、それを計算するために使用される基礎的な値のいずれかが更新されるたびに自動的に更新される派生値であると考えることができます。あなたは コール はパラメータを受け取りません。データプロパティと同じように、計算されたプロパティを参照するのです。以下は、典型的な例である ドキュメント :

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の ドキュメント は本当によくできていて、簡単にアクセスできます。お薦めです。