Computed和Watch的业务实践解读

2023-09-05 11:57:47

在Vue.js中，计算属性和侦听属性都是非常重要的响应式特性，它们可以帮助我们轻松地实现数据的绑定和响应式更新。然而，对于初学者来说，这两个概念可能有些难以理解和区分。

Computed

计算属性是一个派生属性，它依赖于其他属性的值，当这些依赖的属性发生变化时，计算属性的值也会自动更新。例如：

export default {
  data() {
    return {
      count: 0
    }
  },
  computed: {
    doubleCount() {
      return this.count * 2
    }
  }
}

在这个例子中，doubleCount是一个计算属性，它依赖于count属性的值。当count属性发生变化时，doubleCount的值也会自动更新。

Watch

侦听属性允许我们监听一个或多个属性的变化，并在这些属性发生变化时执行一些操作。例如：

export default {
  data() {
    return {
      count: 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`count has changed from ${oldVal} to ${newVal}`)
    }
  }
}

在这个例子中，我们监听了count属性的变化，并在count属性发生变化时执行console.log()函数。

业务场景和最佳实践

在业务开发中，计算属性和侦听属性都有着广泛的应用场景，以下是一些常见的示例：

计算属性：
- 计算总价：在购物车的页面中，我们可以使用计算属性来计算所有商品的总价。
- 格式化日期：在表单页面中，我们可以使用计算属性来将日期格式化为用户友好的格式。
- 验证输入：在登录页面中，我们可以使用计算属性来检查用户的输入是否符合要求。
侦听属性：
- 监听用户输入：在搜索页面中，我们可以监听用户输入的变化，并在用户输入改变时执行搜索操作。
- 监听表单状态：在表单页面中，我们可以监听表单状态的变化，并在表单状态发生改变时执行相应的操作，例如禁用提交按钮。
- 监听路由变化：在单页应用程序中，我们可以监听路由的变化，并在路由发生改变时执行相应的操作，例如加载不同的组件。

在使用计算属性和侦听属性时，有一些最佳实践需要注意：