首先，为什么我需要做这个项目准备工作呢？因为常年习惯React开发的我，最近突然接手了一个Vue项目，而之前基本没有过Vue的实践，这么突兀让还在沉溺于React开发的我进行Vue开发，甚是不习惯，那自然我需要想办法让Vue开发尽量与React相似，这样大概让自己在开发过程中更得心应手吧。
组件开发
特性对比
众所周知，Vue和React都有那么一个特性，那就是可以让我们进行组件化开发，这样可以让代码得到更好的重用以及解耦，在架构定位中这个应该叫纵向分层吧。但是，两个框架开发组件的写法都有所不同（这个不同是基于我的开发习惯），下面先看一下不同的地方。
首先是React，个人习惯于es6的写法（从来没用过es5的createClass的写法）：
import React, { Component } from 'react'; import propTypes from 'prop-types'; export default class Demo extends Component { state = { text: 'hello world' }; static propTypes = { title: PropTypes.String } static defaultProps = { title: 'React Demo' } setText = e => { this.setState({ text: '点击了按钮' }) } componentWillReveiveProps(nextProps) { console.log(`标题从 ${this.props.title} 变为了 ${nextProps.title}`) } render() { const { title } = this.props; const { text } = this.state; return <div> <h1>{title}</h1> <span>{text}<span> <button onClick={this.setText}>按钮<button> </div> } }
下面是常见vue的写法：
<template> <div> <h1>{{title}}</h1> <span>{{text}}<span> <button @click="setText">按钮</button> </div> </template> <script> export default { props: { title: { type: String, default: 'Vue Demo' } }, watch: { title(newTitle, oldTitle) { console.log(`标题从 ${oldTile} 变为了 ${newTitle}`) } }, data() { return { text: 'hello world' } }, methods: { setText(e) { this.text = '点击了按钮'; } } } </script>
这里的视图渲染我们先忽略，下一节在详细对比。
prop对比：
Vue的prop必须在props字段里声明。React的prop不强制声明，声明时也可以使用prop-types对其声明约束。
Vue的prop声明过后挂在在组件的this下，需要的时候在this中获取。React的prop存在组件的props字段中，使用的时候直接在this.props中获取。
组件状态对比，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