Vue.js 中的 Dependencies

发布时间：2023-05-23

一、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 应用。

推荐文章