Vue でのメソッドと計算の違いの詳細な説明 (詳細なチュートリアル)-jsチュートリアル-php.cn

Vue でのメソッドと計算の違いの詳細な説明 (詳細なチュートリアル)

亚连

リリース： 2018-06-01 11:12:46

オリジナル

1723 人が閲覧しました

新しい Vue の設定パラメータの計算式とメソッドの両方で大量のロジックコードを処理できますが、どの属性をいつ使用するかは、Vue を正しく使用するために慎重に区別する必要があります。この記事では、Vue のメソッドと計算の違いを主に紹介します。必要な方は参考にしてください。新しい Vue の構成パラメータでは、計算とメソッドの両方が大量のロジックコードを処理できますが、どの属性を使用するかについて説明します。、それらを区別することによってのみ、vue を正しく使用できるようにする必要があります。

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(&#39;&#39;).reverse().join(&#39;&#39;)}}</p>
//运用计算属性
<p>message反转之后的结果:{{reverseMessage}}</p>
</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>
</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(&#39;&#39;).reverse().join(&#39;&#39;)}}</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(&#39;&#39;).reverse().join(&#39;&#39;);
}
},
methods:{
methodMessage:function () {
return this.message.split(&#39;&#39;).reverse().join(&#39;&#39;);
}
}
})
</script>
</body>
</html>

ログイン後にコピー

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

を追加する必要があります。 2 つのメソッドが存在します。キャッシュも大きく異なります。computed 属性は、reverseMessage をメッセージにバインドするために使用されます。reverseMessage は、ページが入力されるたびにメソッドを実行します。ただし、リアルタイム情報を使用する場合、たとえば、ページにアクセスした現在の時刻を表示する場合は、メソッドを使用する必要があります。

上記は私があなたのためにまとめたものです。

JavaScriptのコーディング規約(コーディング仕様)

jsのdocument.writeとdocument.writelnの違い

Javascriptのprototypeと__proto__の関係を詳しく解説

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