Vue的计算属性和侦听器的详解

Vue的计算属性和侦听器的详解

Vue中的计算属性和侦听器是非常常见的技术，本文将详细解释它们的用途和区别。

计算属性

计算属性是一种声明式的依赖关系，当绑定的数据发生变化时，它会自动重新计算相应的结果。以下是一个示例：

<div id="app">
  <p>原始消息：{{ message }}</p>
  <p>计算后的反转消息：{{ reversedMessage }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  },
  computed: {
    // 声明计算属性
    reversedMessage: function () {
      // “this”指向vm实例
      return this.message.split('').reverse().join('')
    }
  }
})

在这种情况下，计算属性“reversedMessage”会根据“message”的变化自动更新。这就是计算属性的主要优点。同时，它还有以下特性：

1. 将复杂逻辑放在计算属性中，可以使模板更加简洁、易读。
2. 计算属性是基于依赖缓存的，只有当依赖的属性发生改变时才会重新计算，这样可以避免不必要的计算。
3. 计算属性可以设置setter，在需要时执行某些逻辑，例如触发数据改变。


侦听器

侦听器是一种观察并响应数据变化的方式。当某个数据发生变化时，它可以执行某些逻辑。以下是一个示例：

<div id="app">
  <p>原始年龄：{{ age }}</p>
  <p>调整后的年龄：{{ adjustedAge }}</p>
</div>

var vm = new Vue({
  el: '#app',
  data: {
    age: 20,
    yearsToAdd: 10
  },
  watch: {
    // 监听“age”属性变化
    age: function (newVal, oldVal) {
      // 注意：这里无法访问“this”
      this.adjustedAge = newVal + this.yearsToAdd
    }
  },
  // 计算属性“adjustedAge”也可以手动实现，与侦听器实现的效果相同
  computed: {
    adjustedAge: function () {
      return this.age + this.yearsToAdd
    }
  }
})

在这个示例中，侦听器“watch”会监视“age”的变化，当它发生变化时，它会执行某些逻辑。这使得侦听器非常适合处理异步请求、动画等场景。同时，侦听器还有以下特性：

1. 可以监听深度变化，当对象或数组发生变化时也会触发。
2. 可以设置immediate，指示当组件初始化时就立即执行。
3. 可以监听多个属性。

总结

计算属性和侦听器在Vue中都发挥着重要作用，它们对于优化组件和提高用户体验都有巨大贡献。当你需要展示一些复杂的内容时，建议使用计算属性；当你需要响应数据变化并执行某些逻辑时，建议使用侦听器。