vue组件实现computed
Vue 组件中实现 computed 的方法
在 Vue 组件中，computed 是一种基于响应式依赖进行缓存的属性。它适用于需要根据其他数据动态计算的场景，且仅在依赖发生变化时重新计算。
基本用法
在 Vue 选项式 API 中，computed 是一个对象，其属性是计算属性的名称，值为一个函数或包含 get 和 set 的对象。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return `${this.firstName} ${this.lastName}`
}
}
}带有 getter 和 setter 的计算属性
如果需要设置计算属性，可以使用包含 get 和 set 的对象。
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return `${this.firstName} ${this.lastName}`
},
set(newValue) {
const [first, last] = newValue.split(' ')
this.firstName = first
this.lastName = last
}
}
}
}在组合式 API 中使用 computed
在 Vue 3 的组合式 API 中，computed 是一个函数，可以通过 import { computed } from 'vue' 引入。
import { ref, computed } from 'vue'
export default {
setup() {
const firstName = ref('John')
const lastName = ref('Doe')
const fullName = computed(() => {
return `${firstName.value} ${lastName.value}`
})
const editableFullName = computed({
get: () => `${firstName.value} ${lastName.value}`,
set: (newValue) => {
const [first, last] = newValue.split(' ')
firstName.value = first
lastName.value = last
}
})
return { firstName, lastName, fullName, editableFullName }
}
}计算属性的缓存特性
计算属性会基于其依赖的响应式数据缓存结果。只有当依赖的数据发生变化时，计算属性才会重新计算。这种特性可以避免不必要的计算开销。
export default {
data() {
return {
items: [1, 2, 3, 4, 5]
}
},
computed: {
filteredItems() {
console.log('Computing filtered items')
return this.items.filter(item => item > 2)
}
}
}计算属性 vs 方法
计算属性适合用于需要缓存的复杂计算，而方法适合用于不需要缓存或需要传递参数的场景。
export default {
data() {
return {
items: [1, 2, 3, 4, 5]
}
},
computed: {
computedFilter() {
return this.items.filter(item => item > 2)
}
},
methods: {
methodFilter() {
return this.items.filter(item => item > 2)
}
}
}计算属性的依赖跟踪
计算属性会自动跟踪其依赖的响应式数据。如果依赖的数据未发生变化，计算属性会直接返回缓存的结果。
export default {
data() {
return {
a: 1,
b: 2
}
},
computed: {
sum() {
return this.a + this.b
}
}
}
