vue、react、小程序的区别是什么？

vue、react、小程序的区别是什么？本篇文章就来给大家对比一下vue react和小程序三者间写法和生命周期的区别。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。

小程序、vue、react写法的区别

1. 标签内属性:

vue:

:key = "index"   (直接字符串)

react:

key={index}   (单括号)

小程序:

key="{{index}}"   (字符串内双括号)

2. 绑定事件

vue:

@click="clickFuc"  (字符串)

react:

onClick={clickFuc}  (单括号)

小程序:

onTap=“clickFuc”  (字符串)

3. 动态内联style和class

vue:

:style="{height: xx > 0? '300px' : ' ' }"
:class="{firstImg: index === 0}"

react:

style={{display: (index === this.state.currentIndex) ? 'block': 'none'}}
className={`red ${index === this.state.currentIndex ？'active' : null }`}

小程序:

style="display:  {{ num ===3? 'block' :  'none' }}"
class="red {{num==3?'cur':' '}}"

4. 数据修改

Vue

this.data1 = 123;

React

this.setState({
    data1: 123
});

小程序

this.setData({
    data1: 123
});

react、vue、小程序生命周期对比

组件生命周期

A.创建期的生命周期

react	Vue	小程序	说明
	`beforeCreate`		实例化this之前
`constructor`	写在模板中	写在模版中	初始化
	`created`	`created`	实例化this之后
`componentWillMount(旧) <br> getDerivedStateFromProps(新)`	`beforeMount`	`attached`	渲染前执行。
`render`	对应component	对应component	渲染时执行。渲染方法
`componentDidMount`	`Mounted`	`ready`	渲染后执行。

说明：

componentWillMount、beforeMount、attached渲染前执行，可以用于渲染前的修改(同步数据)，并且不会触发重渲染。很少用到
在react中，因为componentWillMount作用不大，为了将逻辑分的更清楚，用getDerivedStateFromProps替代，用于props来更新state
组件实例化后和接受新属性时将会调用getDerivedStateFromProps。它应该返回一个对象来更新状态，或者返回null来表明新属性不需要更新任何状态

发送请求:
react在constructor阶段发送请求
Vue、小程序在created阶段发送请求，Vue如果获取的数据与修改data无关(beforeCreate最好不要改动data里的数据，否则可能会出现无法监听的情况)，则可以在beforeCreate阶段发送请求

对比下来：

基本一样，react采用JSX系统，声明式[手动挡(用的好会比自动挡要好)]，封装在函数/类中
Vue、小程序采用模板系统，响应式[自动挡(优雅)]，区分比较清楚

B.生存期的生命周期（更新）

1.props改变-->state/data改变

react	Vue	小程序	说明
`getDerivedStateFromProps`	自动挡(组件依赖)	自动挡(组件依赖)	父类props改变时触发

对比：

react手动挡，根据props手动判断要不要触发重渲染
vue、小程序自动挡，会缓存组件依赖，从而判断要不要渲染该子组件

2.state/data改变

react	Vue	小程序	说明
`shouldComponentUpdate`	自动优化		通过返回 `false`来阻止组件的重新渲染
`componentWillUpdate`	`beforeUpdate`		更新前执行，用于最后打补丁及操作更新前的DOM
`render`	无对应方法。对应component	无对应方法。对应component	渲染时执行
`componentDidUpdate`	`updated`		更新后执行