Vue vs React

一、从数据到虚拟dom

vue和react都是数据决定虚拟dom，进而决定ui。但是二者的实现思路不一样。

1.vue的思路

捕获变量的赋值和取值操作，在赋值和取值操作中，利用发布--订阅模式更新虚拟dom，进而更新ui。

捕获变量的赋值和取值操作，又叫作数据劫持。

如何捕获变量的赋值和取值操作呢？

let person = { name: "lrx" };
Object.defineProperty(person,'name',{
    set:function(value){
        name = value;
        console.log('每次执行对name的赋值操作，我都会执行');
    },
    get:function(){
        console.log('每次执行对name的取值操作，我都会执行');
        return name;
    }
})
person.name = '良纵';

2.react的思路

react的数据更新是用setState来做的，利用setState对数据进行赋值的时候，会触发domdiff，在根据 shouldComponentUpdate 返回值是true/false来决定要不要更新虚拟dom。

所以，vue的更新是添加监控的方式，性能优化是由框架源码去做的；react的性能优化交给了开发者（shouldComponentUpdate），所以在开发大型应用时，vue的watcher将会成为不可优化的点，但是react可以手动优化，所以常说react比vue更适合大型应用。

二、写法

react倡导all in js，使用jsx做html in js，使用styled-component、jss来做css in js。

vue使用自己的文件格式，html有模板引擎，css有scope做模块化

三、声明式 or 类+函数

react使用类组件、函数组件的方式，暴露很少的api，对ts友好。

vue是声明示写法，api很多，结合ts略复杂。

四、社区

react把很多功能都外包给了社区，vue能自己做的都尽量自己做好。