个人认为，react和vue的业务逻辑是差不多，vue在react上封装了更简洁的方法，使用起来更加的便捷，如：提供了便捷的指令（v-for,v-if,v-model），还提供了更多的属性（computed,watch），我还是比较喜欢用react的，更接近js原生，更容易于理解它。
1、作者
react：Facebook（团队） vue：尤雨溪（个人）
2、生命周期(列出常用的)
react：
componentWillMount：组件初始化时只调用，以后组件更新不调用，整个生命周期只调用一次，此时可以修改state。下一个版本可能会被废弃。
render：react最重要的步骤，创建虚拟dom，进行diff算法，更新dom树都在此进行。此时就不能更改state了。
componentDidMount:组件渲染之后调用，只调用一次。
componentWillReceiveProps：组件初始化时不调用，组件接受新的props时调用。
componentWillUnmount：组件将要卸载时调用，一些事件监听和定时器需要在此时清除。
componentWillUndate:组件更新结束之前执行，在初始化render时不执行。
componentDidUndate:组件更新结束之后执行，在初始化render时不执行
注意：componentDidMount 里面 setState 导致组件更新，组件更新后会执行 componentDidUpdate，此时你又在 componentDidUpdate 里面 setState 又会导致组件更新，造成成死循环了，如果要避免死循环，需要谨慎的在 componentDidUpdate 里面使用 setState
vue:
vue生命周期
４、模板和ＪＳＸ
react：
HTML 语言直接写在 JavaScript 语言之中，不加任何引号，这就是 JSX 的语法，它允许 HTML 与 JavaScript 的混写
vue：
Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。
5、状态管理机制
react：redux+react-redux+redux-thunk+prop-types
Redux 是 JavaScript 状态容器，提供可预测化的状态管理。下图是从阮一峰老师博客上截下来的图，更简洁的方便的说明了哪些地方需要用到redux：
实例：
一、定义一个reducer（纯函数），主要是用来接受state(数据)和action(发送过来的数据)；监听action.type，重新计算返回state值；
二、创建store(createStore)，异步处理的时候，可以使用中间件，让dispatch发送数据的时候，不是发送对象，而是发送一个纯函数，纯函数接受dispatch和getState两个值。让代码可以提取出来，更优雅，更规范。store.subscribe当状态改变时，触发函数，这里是状态改变的时候，重新渲染根组件。Provider提供一个数据传递，所有的子组件都可以接收到store；(原理：是通过context)；
三、dispatch发送action，同步可以直接发送一个action对象，异步通过中间件发送一个函数。通过prop-types模块，定义传值store的类型。
react-redux
它是redux附属功能，其中最常用的:provider和connect。
vue：
之前有写过关于vue状态管理模块vuex：vuex状态管理
6、组件传值
react:
父到子，父组件自定义属性，子通过props来获取父的属性值
子到父，在父组件绑定callbackParent={this.onChildChanged}，在子组件利用this.props.callbackParent(newState),触发了父级的的this.onChildChanged方法，进而将子组件的数据（newState）传递到了父组件。
这样做其实是依赖 props 来传递事件的引用，并通过回调的方式来实现
onChildChanged: function (newState) {
this.setState({
checked: newState
});
},
vue:
1.父组件传递数据给子组件
父组件数据如何传递给子组件呢？可以通过props属性来实现
父组件：
<parent>
<child :child-msg="msg"></child> //这里必须要用 - 代替驼峰
</parent>
data(){
return {
msg: [1,2,3]
};
}
子组件通过props来接收数据:
props: ['childMsg']
2.子组件与父组件通信
子组件:
<template>
<div @click="testClick"></div>
</template>
methods: {
testClick() {
this.$emit('test','123'); //主动触发test方法，'123'为向父组件传递的数据
}
}
父组件:
<div>
<child @test="change" :msg="msg"></child> //监听子组件触发的test事件,然后调用change方法
</div>
methods: {
change(msg) {
this.msg = msg; // msg: 123
}
}
网友评论