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

MIT License