Vue 与 React 对比

一、书写格式

---

两者都采用了 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
);