Vue.js computed用法及代码示例

声明要在组件实例上公开的计算属性。

类型

interface ComponentOptions {
  computed?: {
    [key: string]: ComputedGetter<any> | WritableComputedOptions<any>
  }
}

type ComputedGetter<T> = (
  this: ComponentPublicInstance,
  vm: ComponentPublicInstance
) => T

type ComputedSetter<T> = (
  this: ComponentPublicInstance,
  value: T
) => void

type WritableComputedOptions<T> = {
  get: ComputedGetter<T>
  set: ComputedSetter<T>
}

细节

该选项接受一个对象，其中键是计算属性的名称，值是计算 getter，或者是具有 get 和 set 方法的对象(用于可写计算属性)。

所有的 getter 和 setter 都有它们的 this 上下文自动绑定到组件实例。

请注意，如果您使用带有计算属性的箭头函数，this 将不会指向组件的实例，但您仍然可以将实例作为函数的第一个参数来访问：

export default {
  computed: {
    aDouble: (vm) => vm.a * 2
  }
}

示例

export default {
  data() {
    return { a: 1 }
  },
  computed: {
    // readonly
    aDouble() {
      return this.a * 2
    },
    // writable
    aPlus: {
      get() {
        return this.a + 1
      },
      set(v) {
        this.a = v - 1
      }
    }
  },
  created() {
    console.log(this.aDouble) // => 2
    console.log(this.aPlus) // => 2

    this.aPlus = 3
    console.log(this.a) // => 2
    console.log(this.aDouble) // => 4
  }
}

相关用法

注：本文由纯净天空筛选整理自vuejs.org大神的英文原创作品 computed。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。