この記事は、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 つの方法を紹介します。
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 が再計算され、変更されていない場合は、キャッシュされた名前が再計算されます。使用した計算結果です。 <div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>Web ページを保存して更新すると、計算属性
。 age を変更するためにコンソールに vm.age = 20 と入力すると、ページが再レンダリングされ、「18」が「20」になりますが、コンソールには # が出力されません。 ## 再計算 1 回、つまり、計算された属性は再計算されません。
#そして、
lastName
# # 2 メソッド
methods
メソッドです。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
<div class="code" style="position:relative; padding:0px; margin:0px;"><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><div class="contentsignin">ログイン後にコピー</div></div>保存後、ページに戻って更新します。初めてページに入ったときは、fullNameを再定義しているため、計算せずに<p>watch</p>が表示されます。 <p>firstName<code> と lastName をリッスンするために watch のみを使用したため、fullName に関連しないデータ age を変更した後 なので、計算は実行されません。 lastName を変更すると、計算が実行されます: 
methods は、ページがレンダリングされるたびにメソッドを 1 回実行します。watch と computed は両方ともキャッシュ メカニズムを備えています。ただし、watch の構文は、computed の構文よりもはるかに複雑です。 だから一般に、関数が watch、methods、computed メソッドを通じて実装できる場合、最初の推奨は「計算されたプロパティcomputed」です。
(学習ビデオ共有: vuejs 入門チュートリアル 、基本プログラミング ビデオ )
以上がVue の計算プロパティ、メソッド、リスナーについて話しましょうの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
![[Web フロントエンド] Node.js クイック スタート](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
