vue框架和反应框架有哪些区别

这篇文章主要介绍vue框架和反应框架有哪些区别,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!

区别:1,vue中的数据由数据属性在vue对象中进行管理,反应中的数据由州属性管理;2,vue通过槽插槽进行嵌套传递,反应通过道具。孩子的方式将标签内的部分传递给子组件。

模板和jsx,状态管理,组件嵌套条件渲染,列表渲染,组件间的通信传值,路由管理

<强> vue :vue。js把html, css, javascript组合到一起,用各自的处理方式,使用了基于html的模版语法,允许开发者声明式地将DOM绑定至底层Vue实例的数据.Vue。js的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进DOM的系统。

<强> 反应:HTML语言直接写在JavaScript语言之中,不加任何引号,简单说这就是JSX的语法,它允许HTML与JavaScript的混写。

<强> 2,状态管理

<强> vue :数据由数据属性在vue对象中进行管理。

<强> :反应数据由州属性管理,但不能直接改变状态的状态,需要通过设置状态()去更新。

<强> 3组件嵌套

<强> vue :通过槽插槽进行嵌套传递

父组件嵌套子组件包装

子组件包装

渲染结果

<强> 反应:通过道具。孩子的方式将标签内的部分传递给子组件

父组件嵌套子组件包装

子组件包装

<强> 4条件渲染和列表渲染

<强> vue条件渲染:v, v-show条件渲染一组数。
<强> vue列表渲染:v代表一组数进行列表渲染。

<强>反应条件渲染:使用逻辑运算,,| |,三目运算符来创建表示当前状态的元素。
<强>反应列表渲染:通过使用{}在JSX内构建一个元素集合,使用地图()方法循遍历数组。

<强> 5组件间的通信传值

<强> vue:
父传子:通过父组件绑定自定义属性(或通过v-bind绑定动态属性),子组件使用道具选项时显式的声明道具,以便它可以从父组件接收到期望的数据。
子传父:通过父组件绑定自定义事件,子组件通过this.emit(& # 39;自定义事件& # 39;,值)传值。
非父子:可以使用一个空的vue实例绑定在vue实例的原型上作为一个事件总线中心(vue.prototype。eventBus=new Vue())，用emit触发事件，on监听事件。

父组件one

子组件one-one

react:
父传子：通props属性进行传递。
子传父：父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信。
非父子：嵌套不深的非父子组件可以使共同父组件，嵌套的深可以用redux共享状态。

父组件

子组件

vue框架和反应框架有哪些区别