vue-reactivity-decorators

Use vue 3 Reactivity API with decorators.

import { ref, computed } from 'vue-reactivity-decorators'

class Counter {
  @ref value = 1

  @computed get text() {
    return `Count: ${this.value}`
  }
}

const counter = new Counter()
console.log(counter.text) // Count: 1

counter.value += 1
console.log(counter.text) // Count: 2

API Reference

@ref

Mark a property reactive.

Example:

class Counter {
  @ref value = 1
}

const counter = new Counter()
console.log(counter.value) // 0

counter.value++
console.log(counter.value) // 1

See also:

• ref

@ref.shallow

Mark a property reactive but keep its value clean.

Example:

class Foo {
  @ref.shallow value = {}
}

const foo = new Foo()
// mutating the ref's value is reactive
foo.value = {}
// but the value will not be converted.
isReactive(foo.value) // false

See also:

• shallowRef

@computed

Creates a reacitve value that is derived from other reacitve values, but won't be recomputed unless one of the underlying reacitve values changes.

Example:

class Counter {
  @ref value = 1

  @computed get plusOne() {
    return this.value + 1
  }

  set plusOne(value: number) {
    this.value = value - 1
  }
}

const counter = new Counter()
console.log(counter.plusOne) // 2

counter.plusOne = 1
console.log(counter.value) // 0

See also:

• computed