Vue.js的计算属性和侦听器有何区别？

Vue.js 中的计算属性(computed)和侦听器(watch)都是用于响应数据的变化,但两者有以下区别:

计算属性:

1. 基于它们的响应式依赖进行缓存,只在相关响应式依赖发生改变时才重新计算。
2. 计算属性是一个属性,必须有返回值。
3. 使用方式是:computed: { someComputedProperty() { } }

例如:

<div id="app">
  <p>{{ message }}</p>
  <p>{{ reversedMessage }}</p> 
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('')
    }
  }
})

这里 reversedMessage 是计算属性,依赖 message,只有 message 变化时才会重新计算。

侦听器:

1. 更通用的观察数据变化的方式。
2. 它是一个方法,没有返回值的要求。
3. 使用方式是:手表: { someProperty() { } }

例如:

<div id="app">
  <p>{{ message }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message changed from ' + oldVal + ' to ' + newVal)
    }
  }
})

这里 watch 侦听 message 的变化,一变化就会执行方法,打印信息。

总结来说:
计算属性的主要目的是计算出一个新的值,而侦听器的主要目的是观察一些数据的变化并作出相应的调整。
计算属性更适用于一个数据的值依赖于其他数据,需要动态计算得出的场景。侦听器更适用于一个数据变化要触发另外一个数据变化,或需要执行某些复杂逻辑的场景。但两者的最终目的都是监听和响应数据变化。开发者可以根据具体需求选择使用其中一种或两种结合使用。