vue计算属性如何实现

vue计算属性的实现方法

计算属性是Vue中用于处理复杂逻辑的响应式属性，基于依赖的响应式数据自动缓存计算结果。以下是实现计算属性的几种方式：

基础用法 在Vue组件选项中定义computed属性：

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

带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] || ''
    }
  }
}

组合式API中的计算属性 在setup()函数中使用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: {
  now() {
    // 不会更新，因为Date.now()不是响应式依赖
    return Date.now()
  }
}

与方法的区别 方法调用每次都会执行函数，而计算属性会缓存结果：

methods: {
  getFullName() {
    // 每次调用都会执行
    return this.firstName + ' ' + this.lastName
  }
},
computed: {
  fullName() {
    // 只有firstName或lastName变化时才会重新计算
    return this.firstName + ' ' + this.lastName
  }
}