react-vue-component
Build Vue-like components in React. Get the goodness of Vue-reactivty system such as watchers and computed properties and remove the need of using React's setState
completely.
Installation
$ npm install --save react-vue-component
Basic Usage
-
import Component from "react-vue-component";state =name: "Bob"{thisname = "Albert";}watch{console;}computed{return thisname + " Lolzer";}methods{// Changing name will also change the computed property fullNamethisname = "John";}{// states, methods, and computed properties can be accessed directly via `this` just like in Vueconst name fullName changeName = this;return<div><p>name</p><p>fullName</p><a =>Change my name</a></div>}
Objects
- In Vue, in order to "reactively" add/delete key-value pairs from an object, you will need to use
set(obj, key, value)
anddelete(obj,key)
respectively.
import Component from "react-vue-component"; state = obj : name: "Prev" methods { this; } { this; } watch // nested watchers { console; } { console; } { const obj = this; return <div> Object <a =>Add </a> <a =>Delete name</a> </div> }
Caveats
-
Behind the scenes,
componentWillMount
is being used to inject Vue's reactivity system thus it is made impossible to overwrite. Instead, usebeforeMount
as an equivalent replacement: -
import Component from "react-vue-component";{console}...
Credits
- All credits to the Vue core team for their awesome reactivity system.