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

发布时间:2024年01月20日

在 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)。

总结

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

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

文章来源:https://blog.csdn.net/zzx262625/article/details/135710701
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。