Vue和React的区别

前言：

       相信有个三两年经验的前端，在面试过程中都遇到过这个问题吧。如果没有提前思考过，那回答起来就是啊哦额。
       作为前端最火的两个框架而言，可以说它们没什么区别，你vue能做的项目我react就不能做了吗？当然，这是对于产出（领导）而言。
       作为码畜的我们在面对面试官的时候那就得多整几句了，至于整那几句呢，我想还是整这几句，为什么整这几句呢，也是因为这几句要比那几句更重要。

首先：

       对于框架而言，我们应该从大往小的看。

MVC or MVVM?

Tips:
M（数据）V（视图）C（控制器）
M（数据）V（视图）VM（数据视图）

       我觉得在讨论这个问题之前，我们应该先搞清楚我们的位置。
外：
       如果对于一个完整的软件项目而言，注意！是完整的。别说你什么Vue、React了，就连前端它也只是在 V 这一层。这很容易理解，前端就是在和屏幕上的视图打交道。

内：
       对于react的一个组件而言，我认为它是MVC的。why？cuz：state、render、setState。
       对于vue的一个组件而言，我认为它是MVVM的。why? cuz：data、template、this.name=‘zs’

       这里需要解释一下，因为vue在修改视图的时候是直接修改的数据，如上(this.name=‘zs’），这种行为我认为它是视图和数据的一种绑定行为。

so：别一上来就MVC、MVVM的往面试官脸上呼。所处位置不同，价值也就不同，框架如此，人亦是，你可以是牛马，也可以是黑马。

其次：

双向绑定 or 单向数据流

       一直以来，江湖中都有一个传言，“vue是双向绑定，react是单向数据流”。

双向绑定：
       要说vue是双向绑定？嗯。。。我只能说看你怎么理解这个双向绑定。
       有人说！vue的双向绑定就是v-model，用户在操作视图的时候，绑定的值也跟随着变了。
       我说！就这？
       如果仅仅说一个v-model就让vue贴上一个双向绑定的标签的话，我觉得多少有点滑稽了。

       我认为的双向绑定！

	this.name = '张三'
1

       没错，就这一句代码。或许你理解的双向绑定是Model和View之间的一个双向流动，而我的视角则是在vue内部。通过this（vue），将name和template进行一个绑定。此时，无论是从name到template还是从template到name，它们之间都通过this进行通信。如果硬要把v-model这一做法说成是双向绑定的话，我更愿意称之为数据响应式。

单向数据流：
       从两个框架内部来说，组件间的数据关系都是单向数据流。也就是父组件的数据只能由父组件自己修改，无论是vue的$emit，还是react的回调,总之目的都一样。

再看：

       透过现象看本质！

虚拟DOM or 真实DOM

       首先思考一个问题，钱是什么？为什么要使用钱？
       各位高材生应该都知道最早的市场是直接等物交换，也就是你几只鸡换我几只鸭。
       后来，大家达成共识，使用贝壳（钱）进行等价交换。可以得出，从等物交换到等价交换这一过程中产生了一种新的媒介——贝壳，也就是今天的扫码支付（钱已经。。。）
       由此，不难得出一个结论，只要你有足够的钱，你就可以换得各种各样的东西，包括爱情。。。
       当然，除了能换取东西外，它也可以让你去赶集的时候不用带着你的几只鸡去也能换东西回来了。
       总结一下就是，钱作为一个媒介，并没有实际价值。它不能吃也不能喝，但是可以通过换算，最终换取你想要的东西。

话又说回来

• 虚拟DOM是什么？

{
    tag: 'ul',
    attr: {
        id: 'my_list'
        style:{ background:'red' }
    }
    children:[{
        tag: 'li',
        attr: {
            id: 'my_list_item'
            style:{ color:'red' }
        }  
    }]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

       没错，如你所见它本质就是一串描述真实节点的json。它有什么用？屁用没有！浏览器又不认识它。所以说，它的价值应该是体现在可以通过特定的换算后得到浏览器认识的真实DOM。
       也可以这么说，它是一个独立的存在，也正是这个原因，使得它具备了跨端的能力。但！这并不是它出现的真正原因！

• 为什么要有虚拟DOM？
         要说明白这个问题，那就要回到我们的框架设计上了。react、vue这种框架它是以数据驱动为核心理念，和我们以往使用jQuery等库来直接操纵真实dom不同。当数据发生改变，界面也要自动改变，那么问题就来了！
         假如一个组件牵扯到100个DOM元素，我只改动了组件的某一个数据，那这100个元素里面哪个应该发生变化呢？要搞清楚这一点是非常困难的，所以难办，那就别办了，直接一把梭哈，全部更新。
         可想而知，一个数据的改变就引发了整个组件的重新渲染，这其中的性能浪费是严重的。由于操纵dom的代价本身就很昂贵的，所以不得不解决这部分问题，所以才诞生了虚拟dom。由于是虚拟dom，在数据改变的时候还不会直接影响到真实dom，而是通过比较新旧两棵虚拟dom，找出被更改的地方，再来进行真实dom的修改，因此性能得到大幅优化。也是因此，才出现了diff算法，所以说diff算法并不是解决浏览器自身的渲染性能问题，而是框架自身的问题。