框架的诞生
- vue由独立团队维护，2016年vue2.0问世
- react由facebook创建，主要用于处理数据流，2013年开源
设计思想
- vue是渐进式框架，声明式渲染和组建系统时vue和辛苦的内容，而客户端路由、状态管理、构建工具都是独立出来的，可用可不用。支持数据双向绑定v-model
- react主张函数式编程，推崇纯组件，单向数据流，需要借助onchange和setState实现双向数据流
编写语法
- vue中保留html、css、js分离的写法，style标签还提供了scoped属性，使用jsx预语法
- react也使用jsx
脚手架构建工具
- vue提供了CLI脚手架，有多个可选模板，也可自定义选择安装模块，并保存成模板方便后续使用
- react不允许在项目生成时进行配置，减少学习成本，更快上手
数据绑定
- vue使用数据劫持及发布订阅的方式，创建vm时，将数据配置在实例当中，通过Object.defineProperty对数据进行操作，获取数据触发getter，从而触发vm的watcher方法，更新数据及视图
- react仅支持setstate更改数据，并且是异步批量更新
diff算法
vue跟踪每个组件的依赖关系，不需要重新渲染组件树 react会重新渲染全部组件，所以react中会需要shouldComponentUpdate这个钩子。dom树不会全部重新渲染。
相同点： Vue和react的diff算法，都是不进行跨层级比较，只做同级比较。
不同点：
- 对比
- Vue对比节点，当节点元素类型相同，但是className不同时，认为是不同类型的元素，删除重新创建
- react则认为是同类型节点，进行修改操作
- 更新
- Vue进行diff时，调用patch打补丁函数，一边比较一边给真实的DOM打补丁
- react使用fiber更新
- 列表比对
- vue：采用从两端到中间的方式，旧集合和新集合两端各存在两个指针，两两进行比较，如果匹配上了就按照新集合去调整旧集合，每次对比结束后，指针向队列中间移动；
- react：react则是从左往右依次对比，利用元素的index和标识lastIndex进行比较，如果满足index < lastIndex就移动元素，删除和添加则各自按照规则调整；
这样的操作来看，Vue的diff性能是高于react的
指令
- vue：拥有内部指令，循环可用v-for实现
- react：循环需要用map实现
性能优化
- vue由于依赖追踪系统的存在，当任意数据变动时，都精确的知道自己是否需要重回，所以不需要手动优化。每个组件内部自动实现了
- react需要使用shouldComponentUpdate浅比较优化，或者React.PureComponent实现，使用immutable库弥补浅比较缺陷
但数据过多时，vue中的watcher也会变多，从而造成页面卡顿，所以大型项目最好使用react
原生渲染native
vue和weex合作，可以跨平台只能是，上手简单,在于抹平各个平台的差异。 react：react-native承认平台差异，进行抽象，解决问题。
ssr服务端渲染
vue：nuxt.js react:next.js
生命周期函数
- vue:
- beforeCreate created beforeMount mounted beforeupdate updated beforeDestory destoryed
- destoryed -组件销毁后，数据绑定，事件监听等都被移除，
但dom还存在页面中 - keep-alive标签会增加初始化active和组件切换deactive这两个生命函数
- react:
- getDefaultPorps getInitialState componentWillMount render ComponentDidMount ComponentWillReceiveProps shouldComponentUpdate componentWillUpdate componentDidUpdate componentWillUnmount
- componentWillMount 相当于vue的 created+beforeMount，渲染dom前最后一次更新数据的机会
- ComponentDidMount 相当于vue的 mounted，可操作dom
- componentWillUnmount 相当于vue的 beforeDestory，如使定时器无效，取消网络请求等
销毁组件
- vue有destoryed，dom还存在
- react只有componentWillUnmount
状态集管理工具
- vuex将共享状态挂载到
this.$store.state调用，数据改变时，vue不会重新渲染，需要通过computed使用，vuex也提供mapState辅助- 使用getters创建状态，this.$store.getters创建状态,vuex也mapGetters辅助
- 使用mutations更改state，通过this.$store.commit调用
- 使用actions处理一步操作，通过通过this.store.dispatch方法调用actions的方法，当然也可以使用mapMutations来辅助使用
- react使用redux
- store = creatStore(reducer)
- store.getState
- store.dispatch(action)
- store.subscribe
