一、书写格式
两者都采用了 html 标签的书写方式。
Vue / React
1.注册组件
Vue组件注册有两者方式， 可以全局注册组件，也可以局部注册组件，局部注册的情况下，如果想在父组件使用，刷需要在 components 属性里面引入；
React组件分为简单无状态的函数组件和有状态的类组件，任何组件只要引入后，都可以在其它组件中使用；
2.挂载到目标根元素
Vue:
在根组件的 el 属性中保存元素选择器：
new Vue({el: "#app"})
React:
通过 ReactDOM.render() 渲染：
ReactDOM.render(<App />, document.getElementById('root'));
3.模板语法
Vue:
文本元素中可以用{{}}
标签内部不能用 {{}}，只能用 Vue 的以"v-"开头的指令
React:
{}符号可以出现在文本元素或者标签内，用于写单个表达式。
4.大小写
Vue:
全局注册的组件，如果想要直接写到 html 中，不能用驼峰写法；
this.XXX 只能使用驼峰；
在 template 中只能使用 驼峰，组件名还是"-"；
React:
相比之下，React 就简单很多，它只要求 组件第一个字母大写；
二、更新数据
Vue:
动态绑定，自动更新；v-model 双向绑定；
React:
每次数据更新都要执行this.setState();，重新渲染更新的数据；
三.父子通信(父传子)
Vue: 在父组件中把属性写到子组件标签内，在子组件中，用 props 属性接收；
也可以在子组件中，用 this.$parent 获取父组件数据；
React:
只要写到子标签中，子组件就可以通过 props 直接用了。
四、父子通信(子传父)
Vue:
方法一：
1.在父组件中设置函数，用监听事件的方式绑定这个函数，事件监听设置在子组件标签中；
2.子组件内部，在必要的时候，就用
$emit触发一个同名事件，把数据顺带传出去；
方法二：
也可以给子组件设置一个 ref(ref1) 属性，在父组件中，用 this.$refs.ref1 就可以访问子组件数据；
方法三：
通过$children 可以获取当前实例的直接子组件，子组件有多个的时候，我们通过子组件的$options 属性中的 name 来判断组件
注意，$children 并不保证顺序，也不是响应式的。
React:
父组件以属性的方式给子组件传一个绑定(bind)自身的函数，子组件在必要的时候调用就行了
五、非父子通信
Vue:
1.创建一个空组件实例，别的组件可以在它内部设置监听事件
bus.$on(eventType);2.其它的组件需要通信的时候就在 bus 的内部触发一个同名的事件:
bus.$emit(eventType);
具体做法：
我们可以使用Vue 实例的 provide 属性，但我们在父级组件的 provide 属性中创建一个空实例，
provide(){
return {
eventBus: new Vue()
}
}
所有子组件就可以通过 inject 属性来获取父组件的 provide 属性中的数据
inject: ["eventBus"]
然后我们就可以在子组件中使用了：
this.eventBus
React:
也是设置一个第三方，在组件的外部设置一个监听事件，任何组件都可以发布请求，第三方接收到后，处理数据，重新渲染根目录。
六、路由(router)
Vue:
//1.引入：
import router from 'vue-router'
Vue.use(router)
//2.创建一个路由
var rt = new router({
routes:[{
path:'/xxx', // 匹配路径
components: {
yyy: HelloWorld,
zzz: Slidebar
} // 多个 component , key 作为 `<router-view>` 的 name 属性，可以选择显示哪一个
}]
})
//3.在根组件中加入 router 属性
new Vue({
el: '#app',
router:rt,
components: { App },
template: '<App/>'
})
//4.确定它加载的位置
<router-view name="yyy"></router-view> // 这个的意思是会显示路由中 key 为 "yyy" 的组件
//5.在根组件或子组件模板中我们可以随意使用路由：
<template>
<router-link :to="{path: '/xxx'}">
<p>HelloWorld</p> // 点击这个内容会路由到 path 为"/xxx" 相应的页面
</router-link>
</template>
React:
//1.引入
import { Router, Route, Link } from 'react-router'
function Tab1() {
return <div>Tab1</div>;
}
function Tab2() {
return <div>Tab2</div>;
}
//在`<Router>`组件中使用 `Route`，`Link` 组件就可以实现路由了
ReactDOM.render(
<Router>
<div>
<Link to="/tab1">
<button>tab1</button>
</Link>
<Link to="/tab2">
<button>tab2</button>
</Link>
</div>
<Route path="/" exact component={Tab1} /> // "/" 要加入 exact (精确)，不然路径更改依然会显示
<Route path="/tab1" component={Tab1} />
<Route path="/tab2" component={Tab2} />
</Router>,
rootElement
);
