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.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:
@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: