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
    }
  }
}