react和vue的未来趋势,vue框架和react框架的区别

　　前端框架经历了十几年的竞争，包括JSP，jQuery，Ember，Angular，React，Vue，Solid，Svelte等等。现在大家不得不承认一个事实，在几百个前端框架中，影响力最大的只剩下两个了，Vue和React。

　　Vue进入3.x时代已近2年，React也在今年3月29日发布了React 18版本。

　　今天就来说说2022年两者的区别。

　　我们从头开始比较一下，看谁更厉害。

　　安装和启动从安装两个框架开始。

　　VueVue提供Vue CLI创建Vue项目，安装命令如下：

　　npm安装-g @vue/cli

　　成功复制代码后，可以检查版本以确认安装成功。

　　vue版本

　　复制代码以创建新项目，并运行以下命令：

　　vue创建项目

　　cd项目

　　npm运行服务

　　复制代码反应。创建React项目的工具是create-react-app，简称CRA。

　　npm安装-g创建-反应-应用程序

　　复制代码以创建新项目，并运行以下命令：

　　npx创建-反应-应用项目

　　cd项目

　　npm运行开始

　　复制代码结论。两者在安装和启动项目上几乎一模一样，而且势均力敌。

　　Props两个框架都是基于组件开发的，所以父子组件传值就成了问题。Props是将数据从父组件传递到子组件的关键技术。

　　e在Vue中，道具是通过普通字符串传递的。还可以通过v-bind指令传递变量，缩写为冒号(:)。

　　父组件传递的值：

　　模板

　　Modal :isOpen=open title=创建项目/

　　/模板

　　复制代码子组件以访问props需要defineProps函数：

　　模板

　　表格v-if=isOpen

　　p {{ title }} /p

　　/表单

　　/模板

　　脚本设置

　　const props=defineProps({

　　isOpen:布尔型，

　　标题：字符串

　　});

　　/脚本

　　复制代码React在React中，props通过花括号传递变量。

　　父组件传递的值：

　　Modisopen={open} title=创建项目/

　　复制代码子组件以通过参数获取属性：

　　函数模态({ isOpen，title }) {

　　返回(

　　isOpen

　　形式

　　p { title } /p

　　/表单

　　);

　　}

　　复制代码结论在传递props的时候，Vue需要在属性前面多加一条指令。如果您忘记添加指令，将导致传递一个字符串。反应过来不会有这种情况。

　　取子组件的值时，Vue需要调用defineProps函数，React是通过函数的参数得到的，比较自然。

　　总的来说，Vue的精神负担更大，React更自然。这一轮React赢。

　　EventVue使用模板语法，React使用JSX语法。所以写HTML有了变化。但是我们仍然需要添加鼠标事件、键盘事件等。在自然环境中。事件的处理也是必须的。

　　VueVue通过v-on指令处理事件，缩写为at符号(@)。

　　模板

　　按钮@click=displayName 显示名称/按钮

　　模板

　　脚本设置

　　函数显示名称(){

　　//TODO

　　}

　　/脚本

　　复制代码ReactReact创建事件的方式几乎和原生HTML一样，只是绑定事件的属性名叫做hump命名方法。

　　函数名Alert() {

　　const displayName=()={

　　//TODO

　　}

　　返回(

　　按钮onClick=displayName 显示名称/按钮

　　);

　　}

　　复制代码结论React更自然。Vue仍然需要额外的运营商。如果忘记加运算符，就会变成传字符串的道具。React没有这个问题。这一轮React赢。

　　状态是一个数据驱动和响应的框架，因此管理状态成为一个关键问题。

　　e在Vue中，状态由ref或reactive创建。

　　两者的用法略有不同。ref用于处理基础类型的状态，而reactive通常处理引用类型的状态。

　　使用引用状态时，需要通过引用值来访问状态

　　模板

　　差异

　　p {{名字}} /p

　　p {{姓氏}} /p

　　/div

　　/模板

　　脚本设置

　　从“vue”导入{ ref，reactive }；

　　Const firstname=ref(张)；

　　console . log(first name . value)；

　　const last name=reactive( three )；

　　console.log(姓氏)；

　　/脚本

　　复制代码来监视某个状态变化的方法是watch和watchEffect。

　　两者的区别在于，watchEffect一开始会运行一次。

　　从“vue”导入{ watch，watch effect }；

　　Watch (firstname，()=alert (firstname changed！);

　　观看效果(姓氏，()=alert(姓氏已更改！));

　　复制代码ReactReact使用useState来创建状态。

　　从“react”导入{ use state }；

　　函数ShowName() {

　　Const [firstname，set first name]=usestate( Zhang )；

　　Const [last name，set last name]=use state( three )；

　　console.log(名字，姓氏)；

　　返回(

　　差异

　　p {名字} /p

　　p {姓氏} /p

　　/div

　　)

　　}

　　复制代码React使用useEffect钩子来改变监听状态。这个钩子接受一个回调函数和一个依赖数组。当依赖数组中的任何状态发生变化时，回调函数都会被触发。

　　从“React”导入{ use effect }；

　　useEffect(()={

　　Console.log(名称已更改！);

　　}，[名字，姓氏])；

　　复制代码结论Vue提供了多种创建状态和监听状态的方式，使用时需要考虑使用哪种API，而React只提供了一种方式，但也可以应对各种情况。相比较而言，Vue的精神负担更高，React更简单。这一轮React赢。

　　虽然两个Ref框架都是用组件编程的，但是不可避免的需要访问DOM，比如添加动画，控制输入框焦点等。为了解决这样的问题，两个框架都提供了ref的概念，可以用来创建对DOM的引用。

　　VueVue提供引用API。

　　模板

　　差异

　　输入类型=text ref=name /

　　Button @click=handleBtnClick 开始键入/button

　　/div

　　/模板

　　脚本设置

　　从“vue”导入{ ref }；

　　const name=ref(null)；

　　handleBtnClick(()={

　　name . value . focus()；

　　}

　　/脚本

　　复制代码ReactReact以提供useRef钩子。但是要访问DOM，需要使用ref.current属性。

　　从“react”导入{ useRef }；

　　函数MyName() {

　　const name=useRef(null)；

　　handleBtnClick(()={

　　name . current . focus()；

　　});

　　返回(

　　输入类型=text ref=name /

　　按钮onClick={handleBtnClick}开始键入/按钮

　　)

　　}

　　复制代码结论几乎没什么区别，Ping。

　　双向数据绑定当我们使用input、select、textarea等元素时，输入值需要与状态同步。当状态改变时，元素的值也应该同步。这个功能称为数据双向绑定。

　　VueVue提供了创建双向绑定的v-model指令。

　　模板

　　输入v-model=searchQuery /

　　/模板

　　脚本设置

　　从“vue”导入{ ref }；

　　const search query=ref()；

　　/脚本

　　复制代码ReactReact并没有为这个函数提供单独的API，但是我们也可以实现它。

　　从“react”导入{ use state }；

　　函数MyComponent() {

　　[searchQuery，setSearchQuery]=useState()；

　　const handleChange=(event)={

　　setSearchQuery(event . target . value)；

　　}

　　返回(

　　输入值={ search query } onChange={ handle change }/

　　);

　　}

　　复制代码结论。从语法上看，Vue更简洁。但这将打破单向数据流的原则，因为改变数据不再只有一种方式。尽管React的代码并不简洁，但它更容易跟踪状态。这也是React和Vue在设计理念上的区别。在“让开发者少写代码”和“让代码结构更清晰更易维护”之间，Vue选择了前者，React选择了后者。至于谁好谁坏，个人更喜欢后者，但也有人更喜欢前者。因为这是一种交换，平。

　　动态渲染有时候我们的组件是按照一定的条件进行渲染的，这叫做动态渲染。

　　VueVue提供了三个指令：v-if、v-else和v-show。

　　模板

　　差异

　　P-if=已登录欢迎/p

　　p v-否则，请登录/p

　　按钮v-show=！“登录”登录/按钮

　　/div

　　/模板

　　复制代码ReactReact没有为这个函数提供任何API，而是使用了原生JavaScript的条件语句，if，或者三元运算符等。

　　函数MyComponent() {

　　返回(

　　{isLoggedIn？

　　欢迎/p:

　　p请登录/p

　　}

　　{!IsLoggedIn按钮登录/按钮}

　　);

　　}

　　复制代码结论Vue的语法是给元素添加特殊属性，而React的语法是纯JavaScript语法。语法上，没有太大区别。但是Vue会有额外的学习成本。总的来说，这一轮React略胜一筹。

　　渲染子组件有时候我们需要将一个组件中的子组件传递给其他组件一起渲染。

　　VueVue提供了传递子组件的插槽。

　　组件：

　　模板

　　差异

　　h1欢迎/h1

　　插槽插槽

　　/div

　　/模板

　　复制代码父组件：

　　模板

　　差异

　　H1欢迎来到我的网站/h1

　　情态的

　　输入类型=text /

　　按钮登录/按钮

　　/Modal

　　/div

　　/模板

　　复制代码ReactReact的子组件是props: children上的属性。

　　组件：

　　函数模态({children} ) {

　　返回(

　　差异

　　h1欢迎/h1

　　{儿童}

　　/div

　　);

　　}

　　复制代码父组件：

　　函数UserPage() {

　　返回(

　　差异

　　H1欢迎来到我的网站/h1

　　情态的

　　输入类型=text /

　　按钮登录/按钮

　　/Modal

　　/div

　　);

　　}

　　从上面的例子复制代码结论，你看不出两者的差距有多大。但是在更复杂的情况下，比如传递N个子组件。React可以通过属性传递，操作组件就像操作变量一样；Vue有命名槽、动态槽名、范围槽等概念。操作麻烦，精神负担高。这一轮React赢。

　　通过总结这篇文章，我比较了两个框架中的大部分概念和语法，各有千秋。很难说谁更好。

　　早在2016年左右，我第一次对比两者的时候，就觉得差距还是蛮大的。当时React还是类组件的时代，还得靠this.setState来更新状态。组件也有许多复杂的生命周期。Vue还是Options API的时代，不太好用，比如这个的问题；必须传递数据函数并返回另一个对象；一切都必须定义，使用组件必须定义，使用事件必须定义。

　　看看今天的React和Vue，似乎都在同一个方向参展，而且越来越像。

　　虽然有互相借鉴的成分，但是从几年前就有质疑的声音，说Vue抄袭React。尤其是Vue3引入了Composition API之后，越来越像React了。甚至有人说Vue3的代号，海贼王，是比喻从React偷了很多东西。

　　你认为呢？

　　版权归作者所有：原创作品来自博主前端面试题库助手，转载请联系作者获得转载授权，否则将追究法律责任。

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。