vue框架和react框架的区别是什么

一、Vue和React框架的不同点

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

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

react：HTML 语言直接写在 JavaScript 语言之中，不加任何引号，简单说这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写。

2、状态管理

vue：数据由data属性在Vue对象中进行管理。

react：数据由state属性管理，但不能直接改变state的状态，需要通过setState()去更新。

3、组件嵌套

vue：通过slot插槽进行嵌套传递

父组件嵌套子组件wrap

子组件wrap

渲染结果

react：通过props.children的方式将标签内的部分传递给子组件

父组件嵌套子组件wrap

子组件wrap

4、条件渲染和列表渲染

vue条件渲染：v-if、v-show条件渲染一组数。

vue列表渲染：v-for一组数进行列表渲染。

react条件渲染：使用逻辑运算&& || 、三目运算符来创建表示当前状态的元素。

react列表渲染：通过使用{}在JSX内构建一个元素集合，使用map()方法循遍历数组。

5、组件间的通信传值

vue:

父传子：通过父组件绑定自定义属性（或通过v-bind绑定动态属性），子组件使用 props 选项时显式的声明props，以便它可以从父组件接收到期望的数据。

子传父：通过父组件绑定自定义事件，子组件通过this.emit('自定义事件',value)传值。

非父子：可以使用一个空的 Vue 实例绑定在Vue实例的原型上作为一个事件总线中心(vue.prototype.eventBus = new Vue())，用emit触发事件，on监听事件。

父组件one

子组件one-one

react:

父传子：通props属性进行传递。

子传父：父组件定义事件，子组件触发父组件中的事件时，通过实参的形式来改变父组件中的数据来通信。

非父子：嵌套不深的非父子组件可以使共同父组件，嵌套的深可以用redux共享状态。

父组件

子组件

6、路由管理

vue-router是全局配置方式，vue-router任何路由组件都会被渲染到位置。

react-router是全局组件方式，react-router子组件作为children被传入父组件。

二、Vue和React框架的相同点组件化：React与Vue都鼓励将你的应用分拆成一个个功能明确的模块，这样的组件化使得结构清晰且易复用。

虚拟Dom：为高效渲染页面，减少性能的消耗，都采取了Virtual Dom。

配套框架：两个框架都专注于UI层，其他的功能如路由、状态管理（vuex,redux）等都交由同伴框架进行处理。

构建工具：React可以使用Create React App (CRA)，而Vue对应的则是vue-cli。

vuex里面的this.$store.dispatch 和 this.$store.commit用法以及区别

每一个 Vuex 应用的核心就是 store（仓库）。“store”基本上就是一个容器，它包含着你的应用中大部分的 状态 (state) 。

Vuex 和单纯的全局对象有以下两点不同：

注：官方文档进行查看 vuex

还可以换种说法：

当 vuex 与 storage 关联的数据不变时，两者是等同的；但当是其中一个组件改变该数据时，同时另一个组件用到此数据，vuex是可以实现的，但storage是不可以的。

两个方法都是传值给vuex的mutation改变state

dispatch： 异步 操作，数据提交至 actions ，可用于向后台提交数据

this.$store.dispatch('isLogin',true);

commit： 同步 操作，数据提交至 mutations ，可用于登录成功后读取用户信息写到缓存里

this.$store.commit('loginStatus', 1);

注：必须要用commit(‘SET_TOKEN’, tokenV)调用mutations里的方法，才能在store存储成功。

鹏仔微信 15129739599 鹏仔QQ344225443 鹏仔前端 pjxi.com 共享博客 sharedbk.com