vue-composition-api-proxied
A Proxy based alternative to reactive in Vue 2 / Vue 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. It's for projects stuck on Vue 2 who would like better reactivity.
Usage
Vue 2 & @vue/composition-api
import { reactive } from '@vue/composition-api';
...
setup () {
const user = reactive({});
user.name = 'Foo'; // Not reactive! Booo!
return { user };
},
...
Using proxied instead
import { proxied } from 'vue-composition-api-proxied';
...
setup () {
const user = proxied({});
user.name = 'Foo'; // Reactive! Yay!
return { user };
},
...Proxy sub-elements, or opt-out
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