Vue.js中的computed和watch使用技巧

2023-09-25 14:15:44

对于 Vue.js 开发者来说，computed 和 watch 是两个非常重要的特性，它们可以帮助我们管理和使用组件的数据，让代码更易读、易维护。

什么是 computed

computed 是一个计算属性，它依赖于其他属性，并且当这些其他属性发生变化时，computed 属性也会自动更新。这对于一些需要根据其他属性计算得出的值的情况非常有用，比如计算组件的总价、剩余数量等。

<template>
  <div>
    <p>价格：{{ price }}</p>
    <p>数量：{{ quantity }}</p>
    <p>总价：{{ totalPrice }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      price: 10,
      quantity: 2
    }
  },
  computed: {
    totalPrice() {
      return this.price * this.quantity
    }
  }
}
</script>

在上面的例子中，我们定义了一个 computed 属性 totalPrice，它依赖于 price 和 quantity 属性。当 price 或 quantity 发生变化时，totalPrice 会自动更新。

什么是 watch

watch 允许我们在数据发生变化时执行一些操作，比如更新 UI 或触发网络请求。这对于一些需要在数据发生变化时立即执行的操作非常有用，比如在用户输入表单时实时验证输入的合法性等。

<template>
  <input type="text" v-model="username">
</template>

<script>
export default {
  data() {
    return {
      username: ''
    }
  },
  watch: {
    username(newValue, oldValue) {
      // 在 username 发生变化时执行的操作
    }
  }
}
</script>