Vue.js 中的 Dependencies

一、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

(0)
打賞 微信掃一掃 微信掃一掃 支付寶掃一掃 支付寶掃一掃
OAEXZ的頭像OAEXZ
上一篇 2025-02-24 00:33
下一篇 2025-02-24 00:33

相關推薦

發表回復

登錄後才能評論