首页
软件开发
计算属性和侦听属性有什么区别？

计算属性和侦听属性有什么区别？

发布于 2024-09-26
13 次阅读

在 Vue.js 中，计算属性（computed properties）和侦听属性（watcher）是两种处理数据变化的方式，它们都允许开发者根据数据的变化来更新组件的状态。虽然它们的目标类似，但它们的工作方式和使用场景是有差异的。

计算属性（Computed Properties）

定义：
计算属性是惰性计算的，即只有在需要计算的结果时才会进行计算。
它们是基于它们的依赖项自动地计算出来。
特点：
性能优化：计算属性只在它依赖的响应式属性变化时才会重新计算。
封装逻辑：计算属性可以对一个或多个响应式属性进行计算，并将结果以新的属性形式暴露在外部。
组合getter和setter ：计算属性可以用getter来计算值，可以用setter来改变依赖的响应式属性。

示例：

computed: {

 capitalizedName() {
   // 这个计算属性会返回一个新字符串，以响应 `name` 的变化
   return this.name && this.name.charAt(0).toUpperCase() + this.name.slice(1);
 }

}

侦听属性（Watchers）

定义：
一个侦听器可以响应多个数据属性的变化，而计算属性仅能响应它自己的响应式依赖项的变化。
特点：
更灵活的动作：侦听器是个指令，它允许你执行异步操作或需要更多复杂流程的操作。
放入计算属性中的逻辑难以提取：如果你的计算属性内部有复杂逻辑，可能难以再次重用。
性能开销：与计算属性相比，在每次的响应式属性变化时，侦听器都会触发，有时候可能会影响性能。

示例：

watch: {

 message(newValue, oldValue) {
   this.$emit('input', newValue);
 }

}

原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140161934

目录