vue-composition-api-proxied
Version:
A proxy-based alternative to reactive in Vue 2 / Vue Composition API
71 lines (56 loc) • 2.36 kB
Markdown
# vue-composition-api-proxied
A `Proxy` based alternative to `reactive` in Vue 2 / [Vue Composition API](https://github.com/vuejs/composition-api).
It makes new properties reactive without the noise of `Vue.set(...)`.
NOTE: This project is **not IE-11 compatible** since it uses [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy).
It's for projects stuck on Vue 2 who would like better reactivity.
## Usage
#### Vue 2 & @vue/composition-api
```js
import { reactive } from '@vue/composition-api';
...
setup () {
const user = reactive({});
user.name = 'Foo'; // Not reactive! Booo!
return { user };
},
...
```
#### Using `proxied` instead
```js
import { proxied } from 'vue-composition-api-proxied';
...
setup () {
const user = proxied({});
user.name = 'Foo'; // Reactive! Yay!
return { user };
},
...
```
#### Proxy sub-elements, or opt-out
```js
import { noProxy, proxied } from 'vue-composition-api-proxied';
...
setup () {
const user = proxied({});
user.billingAddress = { street: '1234 Wall St' }; // Deep-reactivity
user.shippingAddress = noProxy({ street: '1234 Penny Lane' }); // Not proxied (e.g. not reactive)
return { user };
},
...
```
See tests for details on how it works, but quick tips:
* Works on objects and arrays
* Also proxies sub-elements, even if they're added later
* Currently does not proxy `Map`, `Set`, `RegExp`, `Date`, `Promise` (those are left as-is)
* PRs with test coverage welcome
## MIT License