# vue-reactivity-decorators

> Use vue 3 [Reactivity API](https://v3.vuejs.org/api/reactivity-api.html) with decorators.

Latest version **0.1.3** (published 2021-05-11) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-reactivity-decorators
pnpm add vue-reactivity-decorators
yarn add vue-reactivity-decorators
bun add vue-reactivity-decorators
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-05-11 |
| First published | 2021-04-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | gzzhanghao |

## Links

- npm: https://www.npmjs.com/package/vue-reactivity-decorators
- npm.io page: https://npm.io/package/vue-reactivity-decorators

## Recent versions

- 0.1.3 (latest) — 2021-05-11
- 0.1.2 — 2021-04-11
- 0.1.1 — 2021-04-11
- 0.1.0 — 2021-04-10

## README

# vue-reactivity-decorators

Use vue 3 [Reactivity API](https://v3.vuejs.org/api/reactivity-api.html) with decorators.

```ts
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:__

```ts
class Counter {
  @ref value = 1
}

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

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

__See also:__

- [ref](https://v3.vuejs.org/api/refs-api.html#ref)

### @ref.shallow

Mark a property reactive but keep its value clean.

__Example:__

```ts
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](https://v3.vuejs.org/api/refs-api.html#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:__

```ts
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](https://v3.vuejs.org/api/computed-watch-api.html#computed)

---
_Source: https://npm.io/package/vue-reactivity-decorators · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._