vue computed实现

计算属性的基本用法

在Vue中，计算属性通过computed选项定义，用于声明依赖于其他属性的动态值。计算属性基于它们的依赖进行缓存，只有依赖发生变化时才会重新计算。

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

计算属性的Setter

计算属性默认只有getter，但也可以提供setter方法。当需要修改计算属性时，setter会被调用。

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

计算属性缓存机制

计算属性会基于它们的响应式依赖进行缓存。只要依赖没有变化，多次访问计算属性会立即返回缓存结果，而不会重新执行函数。

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

计算属性与方法对比

方法每次调用都会执行函数，而计算属性会缓存结果。对于需要复杂计算的场景，计算属性性能更优。

methods: {
  getFullName() {
    return this.firstName + ' ' + this.lastName  // 每次调用都执行
  }
}

计算属性与侦听器对比

计算属性适合在多个数据变化时计算一个值，而侦听器适合在数据变化时执行异步或开销较大的操作。

watch: {
  firstName(val) {
    this.fullName = val + ' ' + this.lastName  // 需要手动维护
  },
  lastName(val) {
    this.fullName = this.firstName + ' ' + val
  }
}

计算属性的最佳实践

计算属性应保持纯净，不要在其中执行异步操作或修改DOM。对于需要异步操作的场景，应使用侦听器或方法。

computed: {
  filteredItems() {
    return this.items.filter(item => {
      return item.name.match(this.searchTerm)
    })
  }
}

计算属性的依赖追踪

Vue会自动追踪计算属性的依赖关系。当在计算属性中访问某个响应式属性时，Vue会将该属性记录为依赖。

computed: {
  displayName() {
    return this.user.active ? this.user.name : 'Anonymous'
    // 依赖this.user.active和this.user.name
  }
}