Vue和React的区别

笔者就直入正题：相信大家都知道什么是vue和react;

那么我们从数据双向绑定、组件及数据流、路由、状态管理等方面来分别对比一下怎样去使用Vue和React。

数据双向绑定

何为数据双向绑定：View层和Model层的数据相互影响。

View层的表单操作、触发事件可能会引起数据变动；ajax请求也可能会引起数据变动，某一数据变动引起另外关联数据的改变

Vue的数据双向绑定

React中的数据双向绑定

相似之处

React与Vue存在很多相似之处，专注于创造前端的富应用。

React与Vue只有骨架，其他的功能如路由、状态管理等是框架分离的组件。

Virtual DOM

Virtual DOM是一个映射真实DOM的JavaScript对象，如果需要改变任何元素的状态，

那么是先在Virtual DOM上进行改变，而不是直接改变真实的DOM。

当有变化产生时，一个新的Virtual DOM对象会被创建并计算新旧Virtual DOM之间的差别。

之后这些差别会应用在真实的DOM上。

Vue在渲染过程中，会跟踪每一个组件的依赖关系，不需要重新渲染整个组件树。

React每当应用的状态被改变时，全部子组件都会重新渲染。这可以通过shouldComponentUpdate这个生命周期方法来进行控制。

组件化：

React与Vue推荐使用组件化，看看单页面的组件化：

vue单页面组件：

goodSwiper.vue

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper wrap">
      <a class="swiper-slide sildetab active" href="#">全部</a>
      <a class="swiper-slide sildetab " href="#">大牌特惠</a>
      <a class="swiper-slide sildetab" href="#">下午茶不贵</a>
      <a class="swiper-slide sildetab" href="#">商场百货</a>
      <a class="swiper-slide sildetab" href="#">生鲜水果</a>
      <a class="swiper-slide sildetab" href="#">鲜花蛋糕</a>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    mounted(){
      const swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        slidesPerView: 4,
        paginationClickable: true,
        spaceBetween: 30,
        freeMode: true
      })
    }
  }
</script>
<style scoped>
  @import '../../assets/css/shoppingclass.css';

</style>

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import './assets/js/jquery-1.8.3.min.js'
import './assets/js/swiper.min.js'
import './assets/css/swiper.min.css'
Vue.config.productionTip = false

new Vue({
  el: '#app',
  router,
  template: '<App/>',
  components: { App }
})

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import goodSwiper  from 'goodSwiper.vue'
Vue.use(Router)

export default new Router({
  routes: [
    {
      name:'goodSwiper',
      path: '/goodSwiper',
      component: goodSwiper

    },
   
  ]
})

react单页面组件

World.jsx

import React from "react";
export default class World extends React.Component{
    render(){
        return <div><h1>world this is world component</h1></div>
    }
}

Hello.jsx

import React from "react";
export default class Hello extends React.Component{
    render(){
        return <div><h1>hello this is hello component</h1></div>
    }
}

App.jsx

import React from "react";
import Hello from "./Hello"
import World from "./World";
import {BrowserRouter as Router,Route,Link} from "react-router-dom";


export default class App extends React.Component{
    render(){
        return <Router>
            <div>
                <ul>
                    <li><a href="/">hello</a></li>
                    <li><Link to="/w">world</Link></li>
                </ul>
                <hr/>
                <Route exact  path="/" component={Hello}/>
                <Route path="/w" component={World}/>
            </div>
        </Router>
    }
}

mainjs

import React from 'react';
import ReactDOM from "react-dom";
import App from "./App";
ReactDOM.render(<App/>,document.querySelector("#app"))

构建工具

React和Vue都有自己的构建工具，你可以使用它快速搭建开发环境。React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。两个工具都能让你得到一个根据最佳实践设置的项目模板。·

由于CRA有很多选项，使用起来会稍微麻烦一点。这个工具会逼迫你使用Webpack和Babel。而vue-cli则有模板列表可选，能按需创造不同模板，使用起来更灵活一点。

主要区别：

模板 vs JSX

v-for

<ul>
    <template v-for="item in items">
        <li>{{ item.msg }}</li>
        <li class="divider"></li>
    </template>
</ul>

<ul>
    <pasta-item v-for="(item, key) in samplePasta" :item="item" :key="key" ></pasta-item>
</ul>

react.js的循环

<ul className="pasta-list">
    {
    Object.keys(this.state.pastadishes).map(key =>
    <PastaItem index={key} key={key} details={this.state.pastadishes[key]} } />
    )
    }
</ul>

状态管理 vs 对象属性：

· react在state状态管理存储数据的，不能修改数据，修改数据在Setstate中

class World extends React.Component{
    constructor(props){
        super(props);
        this.state = {
            a:1,
            books:[
                {title:"react",record:0},
                {title:"angular",record:0}
            ]
        };
        this.Add = this.Add.bind(this);
    }
    Add(){
       return  this.setState({
            a:2
        })
    }

在Vue中，state对象并不是必须的，数据由data属性在Vue对象中进行管理

<script>
    export default {
        name: 'app',
        data() {
            return {
                samplePasta: samplePasta,
                orders: {}
            }
        },
        methods: {
            handleOrder: function (key) {

                if (!this.orders.hasOwnProperty(key)) {
                    this.$set(this.orders, key, {count: 0});
                }

                this.orders[key].count += 1;
            }
        }
    }
</script>

对于管理大型应用中的状态这一话题而言，Vue.js的作者尤雨溪曾说过，（Vue的）解决方案适用于小型应用，但对于对于大型应用而言不太适合。