Vue でのメソッドと計算の違いは何ですか?-jsチュートリアル-php.cn

Vue でのメソッドと計算の違いは何ですか?

php中世界最好的语言

リリース： 2018-04-12 10:49:36

オリジナル

1489 人が閲覧しました

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

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

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

computed は、名前が示すように、計算結果を返さなければなりません。したがって、多くのロジックを処理する必要があるが、最終的な結果を取得したい場合は、computed; を使用できます。メソッドと計算の違いを説明するために、まず、Vue 公式 Web サイトで計算属性の説明を見ていきたいと思います: テンプレート内の

式

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

例を見てみましょう:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

ログイン後にコピー

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="javascript/vue.min.js"></script>
</head>
<body>
<p id="app">
<p>{{message}}</p>
//直接在模板中绑定表达式
<p>{{message.split('').reverse().join('')}}</p>
//运用计算属性
<p>{{reverseMessage}}</p>
//运用methods方式
<p>{{methodMessage()}}</p>
</p>
<script>
var vm=new Vue({
el:"#app",
data:{
message:"hello"
},
computed:{
reverseMessage:function(){
return this.message.split('').reverse().join('');
}
},
methods:{
methodMessage:function () {
return this.message.split('').reverse().join('');
}
}
})
</script>
</body>
</html>

ログイン後にコピー

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

2 つの方法は、

キャッシュ

においても大きく異なります。 reverseMessage はメッセージにバインドされており、ページに入るたびにこのメソッドが実行されます。ただし、ページに入った現在の時刻を表示する場合などです。の場合は、メソッドを使用する必要があります。

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

推奨読書:

Vue2.0のhttpリクエストの使用と読み込み表示の詳細な説明

ノードのプロセスとchild_processモジュールの使用の詳細な説明

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