vue computed实现

computed 的基本用法

在 Vue 中，computed 用于声明计算属性，这些属性基于响应式依赖进行缓存，只有在依赖发生变化时才会重新计算。

new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: function() {
      return this.firstName + ' ' + this.lastName
    }
  }
})

computed 的 getter 和 setter

计算属性默认只有 getter，但也可以提供 setter 方法。

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

computed 与 methods 的区别

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

methods: {
  getFullName: function() {
    return this.firstName + ' ' + this.lastName
  }
}

computed 与 watch 的区别

watch 适用于数据变化时执行异步或开销较大的操作，而 computed 适用于同步计算派生值。

watch: {
  firstName: function(val) {
    this.fullName = val + ' ' + this.lastName
  },
  lastName: function(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

Vue 3 中的 computed

在 Vue 3 组合式 API 中，使用 computed 函数来创建计算属性。

import { ref, computed } from 'vue'

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

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

  return { fullName }
}

computed 的依赖追踪

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

computed: {
  reversedMessage: function() {
    return this.message.split('').reverse().join('')
  }
}

计算属性的缓存机制

计算属性会基于它们的响应式依赖进行缓存，多次访问计算属性会立即返回之前的计算结果，而不必再次执行函数。

computed: {
  now: function() {
    return Date.now()  // 不会更新，因为不是响应式依赖
  }
}