一、Dependencies 是什麼?
Vue.js 通過一種叫做 Dependencies 的技術來追蹤數據變化。具體來說,當狀態發生變化時,Vue.js 會重新渲染頁面。在 Vue.js 中,組件化是核心概念,而 Dependencies 則可以在不同組件之間進行通信和共享狀態。Vue.js 提供了兩種類型的 Dependencies:computed 和 watch。
二、Computed Dependencies
Computed Dependencies 可以理解為計算屬性,根據已有狀態計算派生狀態,從而實現數據的自動更新。它的特點如下:
1、計算屬性是基於它們的依賴緩存的。只有在它的依賴發生改變時才會重新計算其值。
2、計算屬性可以依賴別的計算屬性。如果某個計算屬性依賴了其他的計算屬性,當這個計算屬性的依賴發生變化時也會重新計算,從而實現了多層級依賴計算。
<template>
<div>
<p>熱量:{{ totalCalories }} 千卡</p>
<div>
<p>米飯:<input v-model="riceCalories"> 千卡<p>
<p>雞肉:<input v-model="chickenCalories"> 千卡<p>
<p>油菜:<input v-model="oilVegetableCalories"> 千卡<p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
riceCalories: 0,
chickenCalories: 0,
oilVegetableCalories: 0,
}
},
computed: {
totalCalories() {
return Number(this.riceCalories) + Number(this.chickenCalories) + Number(this.oilVegetableCalories)
}
}
}
</script>
三、Watch Dependencies
Watch Dependencies 相比 Computed Dependencies 更加靈活,可以無需依賴其它數據,而實現數據的監控和響應。它的特點如下:
1、監聽某個特定數據的變化,當數據發生變化時執行相應的邏輯。
2、通過 options.deep 實現對對象或數組的監聽,如果監聽的對象里的某個屬性變化了,也會立刻觸發 watch。
<template>
<div>
<p>性別:{{ gender }}</p>
<button @click="toggleGender">切換性別</button>
</div>
</template>
<script>
export default {
data() {
return {
isMale: true,
}
},
watch: {
isMale(newVal) {
this.gender = newVal ? '男' : '女'
},
},
methods: {
toggleGender() {
this.isMale = !this.isMale
},
},
}
</script>
四、總結
Dependencies 是 Vue.js 組件中十分重要的概念之一,它實現了狀態的自動更新和數據的共享。Computed Dependencies 可以理解為計算屬性,通過依賴緩存實現狀態的計算和更新;而 Watch Dependencies 則是數據的監聽和響應,提供了其他邏輯的鉤子函數,實現了更加靈活的數據管理。通過理解 Dependencies 和掌握其相關的技術,開發者能夠更高效地構建 Vue.js 應用。
原創文章,作者:OAEXZ,如若轉載,請註明出處:https://www.506064.com/zh-tw/n/360925.html