组件状态对比，Vue为data，React为state：
Vue的状态data需要在组件的data字段中以函数的方式声明并返回一个对象。React的状态state可以直接挂载在组件的state字段下，在使用之前初始化即可。
Vue的状态data声明后挂在在this下面，需要的是时候在this中获取。React的状态state存在组件的state字段中，使用的时候直接在this.state中获取。
Vue的状态更新可以直接对其进行赋值，视图可以直接得到同步。React的状态更新必须使用setState，否则视图不会更新。
然后是组件方法对比：
Vue的方法需要在methods字段下声明。React的方法用方法的方式声明在组件下即可。
Vue与React使用方法的方式相同，因为都是挂载在组件中，直接在this中获取即可。
计算属性computed对比：
Vue有计算属性在computed字段中声明。React中无计算属性特性，需要其他库如mobx辅助完成。
Vue的计算属性声明后挂载在this下，需要的时候在this中获取。
监听数据对比：
Vue中可以在watch字段中对prop、data、computed进行对比，然后做相应的操作。在React所有变化需要在声明周期componentWillReveiveProps中手动将state和prop进行对比。
对比完后发现，其实Vue给我的个人感觉就是自己在写配置，只不过配置是以函数的形式在写，然后Vue帮你把这些配置好的东西挂载到组件下面。而且prop、data、computed、方法所有都是挂载组件下，其实单单从js语法上很难以理解，比如说我在computed中，想获取data的text数据，使用的是this.text来获取，如果抛开vue，单单用js语法来看，其实this大多情况是指向computed对象的，所以个人觉得这样的语法是反面向对象的。
这个时候在反过来看React的class写法，本来就是属于面向对象的写法，状态state归状态，属性prop归属性，方法归方法，想获取什么内容，通过this直接获取，更接近于JavaScript编程，相对来说比较好理解。
组件改造
针对Vue的反面向对象，我们可以更改其写法，通过语法糖的形式，将其我们自己的写法编译成Vue需要的写法。
vue-class-component
vue-class-component 是Vue英文官网推荐的一个包，可以以class的模式写vue组件，它带来了很多便利：
methods，钩子都可以直接写作class的方法
computed属性可以直接通过get来获得
初始化data可以声明为class的属性
其他的都可以放到Component装饰器里
vue-property-decorator
vue-property-decorator 这个包完全依赖于vue-class-component，提供了多个装饰器，辅助完成prop、watch、model等属性的声明。
编译准备
由于使用的是装饰器语法糖，我们需要在我们webpack的babel编译器中对齐进行支持。
