Skip to content

🖖 Vue.js with optional reactivity to squeeze more performance out of your app.

License

Notifications You must be signed in to change notification settings

cyrilnie/vue-for-babylonians

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Vue logo

Vue.js for Babylonians

Vue.js is an MIT-licensed open source project with its ongoing development made possible entirely by the support of these awesome backers.

What's the difference between this library and VueJs?

Forked from Vue branch of v2.6.11. Library is originally intended for BabylonJs projects but can be applied for any project where reactivity is desired to be optional. Vue automatically injects reactive getters and setters for all Vue variables. Injecting reactive getters and setters on large and fluid objects, e.g. Babylon objects, create significant bloat and causes performance hit on FPS. This library enables developers to prevent reactivity on objects and even specify the object properties that are intended to be reactive.

How to install?

Given the dependencies on the Vue runtime from the ecosystem of tools like vue-cli and the Vue compiler, the recommended approach is to npm install into your project with the same package alias with Vue. Please note this library currently only works for Vue v2.6.11.

npm i vue@npm:vue-for-babylonians@2.6.11

How to use?

If you have an object that you do not want Vue to automatically register as reactive and inject reactive getters/setters, then attach a property called '_permittedReactivity'.

'_permittedReactivity' should hold a list of object property keys that you want to be reactive. All other object property keys will not be reactive.

let example = {
   foo: 'FOO',
   bar: 'BAR',
   _permittedReactivity: ['foo']   //foo will be reactive. bar will not.
}

If your intention is to omit the entire object from becoming reactive, simply attach '_permittedReactivity' to the object as an empty list.

let example = {
    foo: 'FOO',
    bar: 'BAR',
    _permittedReactivity: []   //foo and bar will not be reactive.
}

If you do not attach '_permittedReactivity' to the object, then Vue will automatically register the entire object and its properties as reactive (just as Vue normally does).

Please note Vue inject reactive getters/setters the first time it is set as a Vue variable. So you must set the _permittedReactivity property before setting it in Vue for it to take effect. Setting _permittedReactivity after the object is already made into a Vue variable will be ignored.

License

MIT

About

🖖 Vue.js with optional reactivity to squeeze more performance out of your app.

Resources

License

Code of conduct

Stars

Watchers

Forks

Packages

No packages published

Languages

  • JavaScript 97.7%
  • Other 2.3%