计算属性

在Vue.js中，计算属性是用于基于响应式数据进行计算的属性。计算属性的值会根据其依赖关系进行缓存，只有在依赖项发生变化时才会重新计算。这样可以提高页面性能，避免不必要的重复计算。

计算属性的定义方式如下：

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  computed: {
    reversedMessage: function () {
      return this.message.split('').reverse().join('');
    }
  }
})

在上面的例子中，我们定义了一个计算属性reversedMessage，它会根据message的值进行计算并返回翻转后的字符串。在模板中，我们可以直接使用计算属性reversedMessage来展示翻转后的消息：

<div>{{ reversedMessage }}</div>

值得注意的是，计算属性是基于它们的依赖缓存的。只有在message发生改变时，reversedMessage才会重新计算。这意味着我们不需要手动去调用计算属性的方法，Vue.js会自动处理依赖的变化。

除了计算属性，Vue.js还提供了侦听器（watchers）来实时监听数据的变化。侦听器的定义方式如下：

new Vue({
  data: {
    message: 'Hello, Vue.js!'
  },
  watch: {
    message: function (newVal, oldVal) {
      console.log('message的值从' + oldVal + '变成了' + newVal);
    }
  }
})

在上面的例子中，我们定义了一个侦听器来监听message的变化。当message的值发生变化时，会触发侦听器里的回调函数，并传入新值和旧值作为参数。

综上所述，计算属性和侦听器是Vue.js中非常重要的两个概念，它们让我们可以更方便地处理数据的计算和监听，提高了开发效率和代码的可维护性。希望以上内容能够帮助你更好地理解和使用Vue.js中的计算属性和侦听器。