vue和react框架的区别

「这是我参与11月更文挑战的第14天，活动详情查看：2021最后一次更文挑战」

1.框架相似之处

Vue.js与React的其中最大一个相似之处，就是他们都使用了一种叫'Virtual DOM'的东西。所谓的Virtual DOM基本上说就是它名字的意思：虚拟DOM，因为改变真是DOM花费的时间太长远超出改变一个js对象，所以所有的元素的改变，都是先进行虚拟DOM（js）的改变，然后在统一进行一次页面真实DOM的渲染，这样可以大大提高页面渲染的效率。还有就是他们都是JavaScript的UI框架

2.框架本质不同

Vue本质是MVVM框架，由MVC发展而来；
React是前端组件化框架，由后端组件化发展而来。

3.监听数据变化的实现原理不同

Vue通过 data数据的初始化，会将data里的每个数据做监听处理，也就是getter/setter函数的特殊封装，等到页面数据变化的时候，可以getter/setter函数的劫持，能精确知道数据变化。

React默认是通过比较引用的方式（diff）进行的，如果不优化可能导致大量不必要的VDOM的重新渲染。因为Vue和React设计理念上的区别，Vue使用的是可变数据，而React更强调数据的不可变，两者没有好坏之分，Vue更加简单，而React构建大型应用的时候更加鲁棒。

4.vue的模板和react的JSX

//vue它需要在在构建时将组件转换为合法的JavaScript和HTML
<template>
   <div class="">111</div>
</template>
\
<script>
export default {
    components:{},
    data(){
      return {
         res:'',
    }
},
 created(){},
 mounted(){},
 watch:{},
 computed:{},
 methods:{},
}
</script>
<style lang="scss" scoped>
</style>

//react也是非常相似的，JavaScript与JSX被写入同一个组件文件中。
import React from "react";
class PastaItem extends React.Component {
    render() {
        const { details, index } = this.props;
        return (
            <li className="pasta-dish list-unstyled">
                <div className="row">
                    <div className="col-md-9 text-left">
                        <h3>{details.name}</h3>
                        <p>
                            {details.desc}
                        </p>
                        <button onClick={() => this.props.addToOrder(index)} className="btn btn-primary">Add to order</button> <mark>{this.props.orders || 0}</mark>
                    </div>
                </div>
            </li>
        );
    }
}

export default PastaItem;

5.React状态管理和vue对象属性

在React中state对象在React应用中是不可变的，意味着它不能被直接改变（这也许不一定正确）。在React中你需要使用setState()方法去更新状态

addToOrder(key) {
        //Make a copy of this.state
        const orders = { ...this.state.orders };

        //update or add
        orders[ key ] = orders[ key ] + 1 || 1;
        this.setState( { orders } );
 }

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

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;
    }
  }
}

React和Vue还有很多区别，组件通信的区别 ，Vuex 和 Redux 的区别等等，后期还会继续更新，请大家持续关注哦！