vue观察属性与侦听属性的区别

在 Vue.js 中，观察属性（通常指的是计算属性 computed）和侦听属性（通常指的是侦听器 watchers）都是用于响应数据变化并触发相应行为的机制。但它们之间有一些关键的区别：

计算属性 (Computed Properties)

• 声明式：计算属性是基于它们的依赖关系进行缓存的，只有在其依赖的数据属性发生变化时才会重新计算。
• 性能优化：由于计算属性是基于它们的响应式依赖进行缓存的，所以多次访问计算属性只会触发一次计算，除非依赖发生变化。
• 同步：计算属性是同步的，它们不能包含异步操作。
• 用途：计算属性通常用于处理复杂逻辑，并返回基于多个数据属性的结果。

侦听器 (Watchers)

• 命令式：侦听器提供了一种更命令式的方式来观察和响应 Vue 实例上的数据变化。
• 灵活性：侦听器提供了更大的灵活性，因为你可以观察到特定的数据属性，并在它们发生变化时执行任意的代码，包括异步操作。
• 性能：如果侦听的数据属性没有变化，则不会触发侦听器中的代码。然而，如果侦听器中的代码执行时间很长，或者依赖于外部服务（如 API 调用），则可能会影响性能。
• 用途：侦听器通常用于在数据属性变化时执行异步操作或较大的开销操作。

示例

计算属性

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'Foo',  
    lastName: 'Bar'  
  },  
  computed: {  
    fullName: function() {  
      return this.firstName + ' ' + this.lastName;  
    }  
  }  
});

在这个例子中，fullName?是一个计算属性，它根据?firstName?和?lastName?来生成全名，并且只有当?firstName?或?lastName?发生变化时才会重新计算。

侦听器

new Vue({  
  el: '#app',  
  data: {  
    firstName: 'Foo',  
    lastName: 'Bar',  
    fullName: ''  
  },  
  watch: {  
    firstName: function(newVal, oldVal) {  
      this.fullName = newVal + ' ' + this.lastName;  
    },  
    lastName: function(newVal, oldVal) {  
      this.fullName = this.firstName + ' ' + newVal;  
    }  
  }  
});

在这个例子中，我们有两个侦听器，分别侦听?firstName?和?lastName?的变化，并在它们变化时更新?fullName。这种方式比计算属性更冗长，且可能导致不必要的重复代码（在这个例子中，两个侦听器都更新了?fullName）。

总结

• 使用计算属性?当你需要基于多个数据属性进行计算，并且希望结果是缓存的时候。
• 使用侦听器?当你需要在数据属性变化时执行异步操作，或者需要更大的灵活性来处理数据变化时。

通常，对于简单的逻辑和数据同步，计算属性是更简洁和高效的选择。对于更复杂的逻辑，特别是涉及异步操作时，侦听器可能更合适。