坐忘道

Appearance

计算属性 ​

Vue中使用computed方法实现计算属性

定义 ​

计算属性是要用的属性不存在, 需要通过已有的属性计算得来

特点 ​

  • 用于声明式地描述一个值如何依赖其他值
  • 必须有返回值
  • 基于它们的依赖进行缓存: 只有依赖发生变化时才会重新计算
  • 适合用在模板中，像普通属性一样使用
  • 默认只有getter, 但也可以提供setter

适用场景 ​

  • 需要根据现有数据计算新值
  • 需要将复杂逻辑封装为可复用的属性
  • 模板中有复杂表达式需要简化

原理 ​

底层借助了Object.defineProperty()方法提供的getter和setter

getter执行时机:

  • 初次读取时会执行一次

  • 当依赖的数据发生改变时调用执行

  • 代码示例

js
new Vue({
  data: {
    firstName: '张',
    lastName: '三'
  },
  computed: {
    fullName: {
      get() {
        return `${this.firstName}-${this.lastName}`
      },
      set(value) {
        const arr = value.split('-')
        this.firstName = arr[0]
        this.lastName = arr[1]
      }
    }
  }
})

优势 ​

与methods实现相比, 计算属性computed内部有缓存机制, 可复用, 效率更高, 调用方便

备注

  • 计算属性最终会出现在Vue实例对象中, 直接调用读取使用即可
  • 如果计算属性要被修改, 则必须写set函数去响应修改, 且set中要引起计算时依赖的数据发生改变