vue中computed如何实现

computed 的基本用法

在 Vue 中，computed 是一个计算属性，用于基于响应式依赖进行复杂逻辑的计算。计算属性会缓存结果，只有依赖的响应式数据发生变化时才会重新计算。

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName() {
      return this.firstName + ' ' + this.lastName
    }
  }
}

computed 的 getter 和 setter

计算属性默认只有 getter，但也可以提供 setter 用于在需要时修改依赖的值。

export default {
  data() {
    return {
      firstName: '张',
      lastName: '三'
    }
  },
  computed: {
    fullName: {
      get() {
        return this.firstName + ' ' + this.lastName
      },
      set(newValue) {
        const names = newValue.split(' ')
        this.firstName = names[0]
        this.lastName = names[1] || ''
      }
    }
  }
}

computed 与 methods 的区别

计算属性是基于它们的响应式依赖进行缓存的，只有在依赖发生变化时才会重新计算。而 methods 每次调用都会执行函数。

export default {
  data() {
    return {
      message: 'Hello'
    }
  },
  computed: {
    reversedMessage() {
      return this.message.split('').reverse().join('')
    }
  },
  methods: {
    reverseMessage() {
      return this.message.split('').reverse().join('')
    }
  }
}

computed 的依赖追踪

计算属性会自动追踪响应式依赖，当依赖发生变化时，计算属性会重新计算。

export default {
  data() {
    return {
      user: {
        name: '张三',
        age: 25
      }
    }
  },
  computed: {
    userInfo() {
      return `姓名：${this.user.name}，年龄：${this.user.age}`
    }
  }
}

computed 在 Vue 3 中的使用

Vue 3 中可以通过 computed 函数来创建计算属性。

import { ref, computed } from 'vue'

export default {
  setup() {
    const firstName = ref('张')
    const lastName = ref('三')

    const fullName = computed(() => {
      return firstName.value + ' ' + lastName.value
    })

    return {
      firstName,
      lastName,
      fullName
    }
  }
}

computed 的性能优化

由于计算属性会缓存结果，适合用于性能开销较大的计算。避免在模板中使用复杂表达式，改用计算属性可以提高性能。

export default {
  data() {
    return {
      list: [1, 2, 3, 4, 5]
    }
  },
  computed: {
    filteredList() {
      return this.list.filter(item => item > 2)
    }
  }
}