ホームページ > 記事 > ウェブフロントエンド > Vue の計算プロパティ、メソッド、リスナーについて話しましょう
Vue の計算プロパティ、メソッド、リスナーについて話しましょう
- 青灯夜游転載
- 2023-03-29 17:54:031207ブラウズ
この記事は、Vue を学習し、Vue の基本理論と実際の操作について説明し、Vue で計算されるプロパティ、メソッド、リスナーを紹介するのに役立ちます。
要件: データには、firstName と lastName という 2 つのコンテンツがあり、ページには「」と表示されます。フルネームfullName」。
前の記事からわかるように、補間式を直接使用することでこの要件を達成できます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>前端一万小时-计算属性、方法与侦听器</title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
{{firstName + ' ' + lastName}} <!-- 2️⃣使用插值表达式展示全名。 -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: { // 1️⃣在 data 中定义一组数据，里面有 firstName 和 lastName 两个内容；
firstName: 'Oli',
lastName: 'Zhao'
}
})
</script>
</body>
</html>ただし、要件は達成されています。 、しかし同時に、テンプレートにはいくつかのロジックがあります。テンプレート自体は表示するだけなので、ロジックを追加する必要はありません。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
理想的な方法は、fullName 変数を直接補間式. フルネーム表示:
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao' // ❗️data 中添加了 fullName！
}
})
</script>
ご覧のとおり、このようにコードを書いても問題ありません。
しかし、実際にはコードは冗長です。元のデータにはすでに firstName と lastName があり、フルネームを結合するために使用できますが、再定義されています。 fullName 。
次に、この要件を解決するための他の 3 つの方法を紹介します。
1 計算されたプロパティcomputed
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao'
},
computed: { // 1️⃣计算属性 computed 属于 Vue 实例的方法，直接定义在实例中；
fullName() { // 2️⃣计算属性的值 fullName 是一个函数；
return this.firstName + ' ' + this.lastName // ❗️一定要写上 return 把计算结果返回！
}
}
})
</script>計算されたプロパティを使用した後、コードはまったく冗長になりません。は firstName と lastName に基づいて計算され、ページへの影響は同じです。 
計算プロパティに関するもう 1 つの非常に重要な知識ポイントがあります。
計算プロパティは、応答性の依存関係に基づいてキャッシュされます。計算された属性が依存するデータが変更されると再計算され、変更がない場合は計算されず、最後の計算が行われます。結果つまり、
(これにより、パフォーマンスもいくらか向上します)。 コードでは、
firstName または lastName が変更されると、fullName が再計算され、変更されていない場合は、キャッシュされた名前が再計算されます。使用した計算結果です。 <pre class="brush:html;toolbar:false;"><div id="app">
{{fullName}}
{{age}} <!-- 2️⃣把 age 渲染到模板上； -->
</div>
<script>
var vm = new Vue({
el: &#39;#app&#39;,
data: {
firstName: &#39;Oli&#39;,
lastName: &#39;Zhao&#39;,
age: 18 // 1️⃣data 中添加 age 为 18；
},
computed: {
fullName() {
console.log(&#39;计算了一次&#39;) // 3️⃣每当执行时 console.log 一次。
return this.firstName + &#39; &#39; + this.lastName
}
}
})
</script></pre>Web ページを保存して更新すると、計算属性
。 age を変更するためにコンソールに vm.age = 20 と入力すると、ページが再レンダリングされ、「18」が「20」になりますが、コンソールには # が出力されません。 ## 再計算 1 回、つまり、計算された属性は再計算されません。
#そして、
lastName
# # 2 メソッド
methods
##2 番目は、すでによく知られている メソッドです。methods
: <div id="app">
<!-- ❗️注意：在插值表达式内，计算属性通过属性的名字就可以用，但调用方法时，
一定要加上 () 来进行调用！ -->
{{fullName()}}
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18
},
methods: { // ❗️在 methods 中定义 fullName 方法，逻辑上与计算属性一样；
fullName() {
console.log('计算了一次')
return this.firstName + ' ' + this.lastName
}
}
})
</script>保存後、ページを更新して効果を表示するときに計算が実行されます。 age を変更すると再計算され、lastName を変更すると再計算されます。つまり、メソッドは機械的にキャッシュされません。ページが再レンダリングされる限り、fullName
メソッドは再実行されます
3 リスナーwatch
リスナーを使用する場合、コードを冗長にすることは避けられません: <pre class="brush:html;toolbar:false;"><div id="app">
{{fullName}} <!-- 1️⃣-②：插值表达式内不需要 ()； -->
{{age}}
</div>
<script>
var vm = new Vue({
el: &#39;#app&#39;,
data: {
firstName: &#39;Oli&#39;,
lastName: &#39;Zhao&#39;,
fullName: &#39;Oli Zhao&#39;, // 1️⃣-①：data 中定义 fullName；
age: 18
},
watch: { // 2️⃣在实例中定义侦听器 watch；
firstName() { /*
2️⃣-①：定义 firstName 方法，对 firstName 进行侦听，
当它改变时，重新对 fullName 赋值；
*/
console.log(&#39;计算了一次&#39;)
this.fullName = this.firstName + &#39; &#39; + this.lastName
},
lastName() { /*
2️⃣-②：定义 lastName 方法，对 lastName 进行侦听，
当它改变时，重新对 fullName 赋值。
*/
console.log(&#39;计算了一次&#39;)
this.fullName = this.firstName + &#39; &#39; + this.lastName
}
}
})
</script></pre>保存後、ページに戻って更新します。初めてページに入ったときは、fullName
を再定義しているため、計算せずにwatch
が表示されます。firstName と lastName をリッスンするために watch のみを使用したため、fullName に関連しないデータ age を変更した後 なので、計算は実行されません。 lastName を変更すると、計算が実行されます:
-
methodsは、ページがレンダリングされるたびにメソッドを 1 回実行します。 -
watchとcomputedは両方ともキャッシュ メカニズムを備えています。ただし、watchの構文は、computedの構文よりもはるかに複雑です。
だから一般に、関数が watch、methods、computed メソッドを通じて実装できる場合、最初の推奨は「計算されたプロパティcomputed」です。
(学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )
以上がVue の計算プロパティ、メソッド、リスナーについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。