Vue でのメソッドと計算の違い

今回は、Vue でメソッドと計算の違いについて説明します。Vue でメソッドと計算を使用する場合の注意事項について説明します。実際のケースを見てみましょう。

新しい Vue の設定パラメーターの計算式とメソッドの両方で大量のロジック コードを処理できますが、いつどの

プロパティを使用するか、Vue を正しく使用するために慎重に区別する必要があります。

computed は、名前が示すように、計算結果を返す必要があるため、多くのロジックを処理する必要があるが、最終的に最終結果を取得したい場合は、

を使用できます。メソッドと計算された属性の違いを説明します。違いについては、ここでまず、Vue 公式 Web サイトで計算された属性について説明していることを見ていきたいと思います。テンプレート内の

式 は非常に便利ですが、実際には単純な操作にのみ使用されます。テンプレートにロジックを入れすぎると、テンプレートが太くなり、保守が困難になる可能性があります。

例を見てみましょう:

nbsp;html>


<meta>
<title>Title</title>
<script></script>


<p>
//直接在模板中绑定表达式
</p><p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>

<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>

上記の場合、テンプレートはもはや単純かつ明確ではありません。これが逆メッセージであることに気づく前に、もう一度確認する必要があります。テンプレート内でメッセージを何度も反転表示したい場合、問題はさらに悪化します。このため、複雑なロジックでは計算されたプロパティを使用する必要があります。以下では、メソッドと計算結果を使用して比較します。

nbsp;html>


<meta>
<title>Title</title>
<script></script>


<p>
</p><p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>

<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>

これら 2 つのメソッドを比較しました。返される結果は同じですが、計算された属性を計算するメソッドでは属性を使用するときに () を追加する必要はありませんが、methods メソッドはメソッドのように使用する必要があり、

を追加する必要があります。

Cache に含まれる 2 つのメソッドも大きく異なります。 計算された属性は、reverseMessage をメッセージにバインドするために使用されます。 reverseMessage は、ページに入るたびにメソッドが実行されます。 , ただし、リアルタイムを使用する場合 ページに入った現在の時刻を表示するなど、情報を表示する場合はメソッドを使用する必要があります。

この記事の事例を読んだ後、あなたはその方法をマスターしたと思います。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨書籍:

Vue2.0 での http リクエストとロードの表示

Vue2.0 がコンポーネント データの双方向バインディングを実装する方法

以上がVue でのメソッドと計算の違いの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。