比较一下React与Vue
其他
2020-02-05 14:04:35
阅读次数: 0
相同点
- 都有组件化开发和
Virtual DOM
- 都支持
props
进行父子组件间数据通信
- 都支持数据驱动视图, 不直接操作真实
DOM
, 更新状态数据界面就自动更新
- 都支持服务器端渲染
- 都有支持
native
的方案,React
的React Native
,Vue
的Weex
不同点
- 数据绑定:
vue
实现了数据的双向绑定,react
数据流动是单向的
- 组件写法不一样,
React
推荐的做法是JSX
, 也就是把HTML
和CSS
全都写进JavaScript
了,即'all in js'
;Vue
推荐的做法是webpack+vue-loader
的单文件组件格式,即html,css,js
写在同一个文件
state
对象在react
应用中不可变的,需要使用setState
方法更新状态;在vue
中,state
对象不是必须的,数据由data
属性在vue
对象中管理
virtual DOM
不一样,vue
会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React
而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react
中会需要shouldComponentUpdate
这个生命周期函数方法来进行控制
React
严格上只针对MVC
的view
层,Vue
则是MVVM
模式
Redux管理状态的机制
对Redux基本理解
redux
是一个独立专门用于做状态管理的JS
库, 不是react
插件库
- 它可以用在
react
, angular
, vue
等项目中, 但基本与react
配合使用
- 作用: 集中式管理
react
应用中多个组件共享的状态和从后台获取的数据
Redux的工作原理
Redux使用扩展
- 使用
react-redux
简化redux
的编码
- 使用
redux-thunk
实现redux
的异步编程
- 使用
Redux DevTools
实现chrome
中redux
的调试
Vue组件间通信方式
通信种类
- 父组件向子组件通信
- 子组件向父组件通信
- 隔代组件间通信
- 兄弟组件间通信
实现通信方式
props
vue
自定义事件
- 消息订阅与发布
vuex
slot
方式1: props
- 通过一般属性实现父向子通信
- 通过函数属性实现子向父通信
- 缺点: 隔代组件和兄弟组件间通信比较麻烦
方式2: vue自定义事件
vue
内置实现, 可以代替函数类型的props
- 绑定监听:
<MyComp @eventName="callback"
- 触发(分发)事件:
this.$emit("eventName", data)
- 缺点: 只适合于子向父通信
方式3: 消息订阅与发布
- 需要引入消息订阅与发布的实现库, 如:
pubsub-js
- 订阅消息:
PubSub.subscribe('msg', (msg, data)=>{})
- 发布消息:
PubSub.publish(‘msg’, data)
- 优点: 此方式可用于任意关系组件间通信
方式4: vuex
- 是什么:
vuex
是vue
官方提供的集中式管理vue
多组件共享状态数据的vue
插件
- 优点: 对组件间关系没有限制, 且相比于
pubsub
库管理更集中, 更方便
方式5: slot
- 是什么: 专门用来实现父向子传递带数据的标签
- 注意: 通信的标签模板是在父组件中解析好后再传递给子组件的
Vuex管理状态的机制
对Vuex基本理解
- 是什么:
Vuex
是一个专为 Vue.js
应用程序开发的状态管理的vue
插件
- 作用: 集中式管理
vue
多个组件共享的状态和从后台获取的数据
Vuex的工作原理
Vue的MVVM实现原理
理解
Vue
作为MVVM
模式的实现库的2种技术
- 模板解析: 实现初始化显示
- 数据绑定: 实现更新显示
原理结构图
发布了77 篇原创文章 ·
获赞 114 ·
访问量 1万+
转载自blog.csdn.net/weixin_40693643/article/details/104111062