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

本文主要是介绍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）。