vue实现computed
Vue 中实现 computed 属性
在 Vue 中，computed 是一种基于响应式依赖进行缓存的属性。它适用于需要根据其他数据动态计算的场景，且只在依赖发生变化时重新计算。
基本用法
在 Vue 组件中，可以通过 computed 选项定义计算属性：
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}计算属性 fullName 会根据 firstName 和 lastName 的变化自动更新。
计算属性的缓存特性
计算属性会缓存结果，只有在依赖的响应式数据（如 firstName 或 lastName）发生变化时才会重新计算。如果多次访问 fullName，只会触发一次计算。
计算属性的 setter
计算属性默认只有 getter，但也可以提供 setter：
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[1] || ''
}
}
}通过 setter，可以直接修改 fullName，从而反向更新 firstName 和 lastName。
计算属性 vs 方法
计算属性和方法都可以实现类似功能，但计算属性具有缓存优势。方法会在每次调用时重新执行，而计算属性只有在依赖变化时才会重新计算。
methods: {
getFullName() {
return this.firstName + ' ' + this.lastName
}
}如果不需要缓存，使用方法更合适；如果需要缓存，使用计算属性更高效。
计算属性与侦听器（watch）
计算属性适合基于多个依赖的动态计算，而 watch 更适合在数据变化时执行异步或开销较大的操作。
watch: {
firstName(newVal) {
console.log('firstName changed:', newVal)
}
}在 Composition API 中使用 computed
在 Vue 3 的 Composition API 中，可以通过 computed 函数定义计算属性：
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return firstName.value + ' ' + lastName.value
})
return {
firstName,
lastName,
fullName
}
}
}计算属性的依赖追踪
计算属性会自动追踪其依赖的响应式数据。如果依赖的数据发生变化，计算属性会标记为“脏”，并在下次访问时重新计算。
计算属性的性能优化
由于计算属性具有缓存特性，适合用于复杂计算或频繁访问的数据。避免在计算属性中执行高开销操作，因为它可能被多次调用。
计算属性的动态更新
计算属性的动态更新是基于 Vue 的响应式系统实现的。确保依赖的数据是响应式的（如通过 data 或 ref 定义），否则计算属性不会更新。
计算属性的链式依赖
计算属性可以依赖其他计算属性，形成链式依赖。Vue 会自动处理这种依赖关系，确保所有计算属性按正确顺序更新。
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
},
greeting() {
return 'Hello, ' + this.fullName
}
}计算属性的调试
在开发过程中，可以通过 Vue Devtools 查看计算属性的值和依赖关系，帮助调试复杂的计算逻辑。
计算属性的异步操作
计算属性不支持异步操作。如果需要在数据变化时执行异步操作，应使用 watch 或 watchEffect。
计算属性的默认值
可以为计算属性设置默认值，确保在依赖数据未初始化时不会报错：
computed: {
fullName() {
return (this.firstName || '') + ' ' + (this.lastName || '')
}
}计算属性的动态名称
在极少数情况下，可能需要动态定义计算属性的名称。可以通过对象展开或动态键名实现：
computed: {
...mapGetters(['someGetter']),
['dynamic' + this.suffix]() {
return this.value * 2
}
}计算属性的最佳实践
- 保持计算属性纯函数化，避免副作用。
- 避免在计算属性中修改依赖数据。
- 对于简单逻辑，优先使用计算属性而非方法。
- 对于复杂逻辑，考虑拆分为多个计算属性以提高可读性。
