溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇“Vue中的計算屬性、方法與偵聽器源碼分析”文章的知識點大部分人都不太理解，所以小編給大家總結(jié)了以下內(nèi)容，內(nèi)容詳細，步驟清晰，具有一定的借鑒價值，希望大家閱讀完這篇文章能有所收獲，下面我們一起來看看這篇“Vue中的計算屬性、方法與偵聽器源碼分析”文章吧。
需求：在 data 中，有 firstName 和 lastName 兩個內(nèi)容，頁面顯示“全名 fullName ”。
我們直接使用插值表達式就能實現(xiàn)這個需求：
<!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 中定義一組數(shù)據(jù)，里面有 firstName 和 lastName 兩個內(nèi)容；
firstName: 'Oli',
lastName: 'Zhao'
}
})
</script>
</body>
</html>
但需求是實現(xiàn)了，可同時模板上就有了一些邏輯。而模板本身是用來顯示就好，并不需要添加邏輯在里面！
理想的方式是在插值表達式中直接添加 fullName 變量來顯示全名：
<div id="app">
{{fullName}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao' // ??data 中添加了 fullName！
}
})
</script>
可以看到，當代碼這樣寫時也是沒有問題的。
但實際上代碼冗余了：原本 data 內(nèi)已經(jīng)有了 firstName 和 lastName ，可以用它們組合出全名，但又重新定義了一次 fullName 。
接下來，將介紹另外三種方法來解決這個需求。
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 是一個函數(shù)；
return this.firstName + ' ' + this.lastName // ??一定要寫上 return 把計算結(jié)果返回！
}
}
})
</script>
使用計算屬性后，代碼完全不會冗余， fullName 是根據(jù) firstName 和 lastName 計算出來的，頁面上的效果也是一樣。
計算屬性還有一個非常重要的知識點：
計算屬性會基于它們的響應(yīng)式依賴進行緩存。
也就是說，當計算屬性依賴的數(shù)據(jù)發(fā)生改變時，它會重新計算；若沒有變化時，則不計算，會一直使用上一次計算的結(jié)果（這樣也就提高了一些性能）。
在我們的代碼中，當 firstName 或 lastName 改變時，fullName 會重新計算，不變時則用緩存的上次計算結(jié)果。
<div id="app">
{{fullName}}
{{age}} <!-- 2??把 age 渲染到模板上； -->
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
age: 18 // 1??data 中添加 age 為 18；
},
computed: {
fullName() {
console.log('計算了一次') // 3??每當執(zhí)行時 console.log 一次。
return this.firstName + ' ' + this.lastName
}
}
})
</script>
保存刷新網(wǎng)頁后，可以看到計算屬性 計算了一次 。當在控制臺輸入 vm.age = 20 更改 age 后，頁面重新渲染了，“18”變?yōu)榱恕?0”，但控制臺沒有再次輸出 計算了一次 ，即計算屬性沒有進行重新計算。
而當我們更改 lastName 后，會重新計算一次：
methods第二種是我們已經(jīng)非常熟悉的方法 methods ：
<div id="app">
<!-- ??注意：在插值表達式內(nèi)，計算屬性通過屬性的名字就可以用，但調(diào)用方法時，
一定要加上 () 來進行調(diào)用！ -->
{{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 方法就會被重新執(zhí)行一次。
watch當使用偵聽器時，不可避免的會讓代碼冗余：
<div id="app">
{{fullName}} <!-- 1??-②：插值表達式內(nèi)不需要 ()； -->
{{age}}
</div>
<script>
var vm = new Vue({
el: '#app',
data: {
firstName: 'Oli',
lastName: 'Zhao',
fullName: 'Oli Zhao', // 1??-①：data 中定義 fullName；
age: 18
},
watch: { // 2??在實例中定義偵聽器 watch；
firstName() { /*
2??-①：定義 firstName 方法，對 firstName 進行偵聽，
當它改變時，重新對 fullName 賦值；
*/
console.log('計算了一次')
this.fullName = this.firstName + ' ' + this.lastName
},
lastName() { /*
2??-②：定義 lastName 方法，對 lastName 進行偵聽，
當它改變時，重新對 fullName 賦值。
*/
console.log('計算了一次')
this.fullName = this.firstName + ' ' + this.lastName
}
}
})
</script>
保存后回到頁面刷新。當?shù)谝淮芜M入頁面時，因為我們重新定義過 fullName ，所以 watch 不會進行計算就會顯示出來。在修改與 fullName 不想關(guān)的數(shù)據(jù) age 后，由于我們只用 watch 偵聽了 firstName 和 lastName ，所以也不會進行計算。當我們修改 lastName 時，則進行一次計算：
以上就是關(guān)于“Vue中的計算屬性、方法與偵聽器源碼分析”這篇文章的內(nèi)容，相信大家都有了一定的了解，希望小編分享的內(nèi)容對大家有幫助，若想了解更多相關(guān)的知識內(nèi)容，請關(guān)注億速云行業(yè)資訊頻道。
免責聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機網(wǎng)站二維碼