React 和 Vue的区别

    xiaoxiao2025-05-14  52

    一.共同点

    都是mvvm 框架,都是数据和视图分离,修改视图,不是通过直接修改,而是通过修改数据来驱动视图变化。这是MVVM框架区别于jq直接操作dom的区别。

     Vue修改数据:this.data = newVal这种形式就可以修改。而React 需要通过setState来修改

     

    2.两者在模板渲染的实现上都是使用VNode的思想。

    Vue的template最终解析成一个render函数,而render函数最后返回一颗虚拟DOM树;

    React 本身就是直接写render函数,使用JSX的写法,最后返回的也是一棵虚拟DOM树;

    核心方法都是createElement方法。

    3.模板渲染都是异步的。

    Vue修改数据后,直接获取Dom是旧的Dom。使用nextTick确保新的Dom渲染完成;

    React修改数据,setState本身就是异步出来。如果修改数据后,要操作Dom,可以使用回调函数:

    setState({ index: 1 }}, function(){ console.log(this.state.index); })

    为什么要异步渲染?

    a.开发者有可能多次修改数据,每次修改都执行render函数,性能消耗太大

    b.从浏览器的渲染原理来说,浏览器在执行js的时候,dom的渲染是被阻塞的。所以即使修改数据后,立即render函数,浏览器也看不到结果。所以干脆对数据修改处理完以后,再统一一次性执行render函数。

    4.两块框架在使用中,实现中小项目,都没什么问题。

    二.区别

    1.Vue 模板和逻辑的分开更彻底:有template和js文件可以分开写。模板文件会更清晰。template的很多指令需要先学习一下。需要记住的内置指令比较多。

    2.React 使用JSX的写法,模板和逻辑耦合在一起。有时看起来还是比较不优雅的。但是JSX写法更方便,没有那么多指令需要学习。而且JSX已经成为一种规范。

     

    三.如何选择

    1.Vue学习成本更低。适合小团队快速开发。而且国内社区也更活跃。

    2.React适合团队水平更高一点的。

    最新回复(0)