侦听器和计算属性的全面对比（适用场景、实现方式、运行机制）

2024-02-25 02:38:00

作为前端开发框架，Vue.js提供响应式数据和组件化编程等功能。在项目开发中，需要用到侦听器和计算属性这两个功能。

侦听器（watch选项）

侦听器用于监视数据属性的变化，当数据发生改变时，执行相应的回调函数。实现方式是使用watch选项，它接受一个对象，其中key是你要监视的数据属性，value是回调函数。

watch: {
  counter: function (newValue, oldValue) {
    // 当counter发生改变时执行此函数
  }
}

计算属性（computed选项）

计算属性用于计算数据属性的衍生值，它依赖于其他数据属性，当这些数据属性发生变化时，计算属性的值也会随之更新。实现方式是使用computed选项，它返回一个函数，该函数返回计算属性的值。

computed: {
  total: function () {
    // 返回counter和counter2的和
    return this.counter + this.counter2
  }
}

适用场景

侦听器适用于以下场景：
- 当需要在数据发生改变时执行特定的操作。
- 当需要在数据发生改变时更新UI。
- 当需要在数据发生改变时与其他组件进行通信。
计算属性适用于以下场景：
- 当需要计算数据属性的衍生值。
- 当需要在数据发生改变时更新UI，但不需要执行特定的操作。

实现方式

侦听器使用watch选项实现，它接受一个对象，其中key是你要监视的数据属性，value是回调函数。
计算属性使用computed选项实现，它返回一个函数，该函数返回计算属性的值。

运行机制

侦听器在数据发生改变时运行。
计算属性在数据发生改变时或在首次访问时运行。

代码示例

// 侦听器示例
watch: {
  counter: function (newValue, oldValue) {
    // 当counter发生改变时执行此函数
    this.updateCounter(newValue)
  }
}

// 计算属性示例
computed: {
  total: function () {
    // 返回counter和counter2的和
    return this.counter + this.counter2
  }
}