在 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);} }