react与vue的生命周期(新版)

react与vue的生命周期对比，之前学vue和react的时候，对他们两的生命周期总是搞混，这回总结对比一下

react：

# react生命周期函数
# 以下是按顺序排列

constructor(props) {                                        # 组件挂载之前
    super(props);
    this.state = {}

}

# Mounting 过程
componentWillMount() {                                    # 组件将要挂载
    console.log('componentWillUnmount');
}

render() {                                                  # 组件正在挂载
    console.log('render')
    return (
    <div>hello world</div>
    )
}

componentDidMount() {                                       #  组件挂载完成
    console.log('componentDidMount');
}


# Updation 数据更新过程
# state props 优先级为state父组件数据 但到了子组件中间是先执行子props
$ props 


# 下面这个生命函数是在组件中的       
componentWillReceiveProps() {                         # 组件中props数据改变时 在子组件渲染之间执行
    console.log('componentWillReceiveProps')
}

shouldComponentUpdate() {
    console.log('shouldComponentUpdate');                  # false的意思是 如果数据没有更新则下面的函数不会执行 提升性能
    return false;
        
}

componentWillUpdate() {
    console.log('componentWillUpdate');
}

# render(){}

componentDidUpdate() {
    console.log('componentDidUpdate');
}

$ state
shouldComponentUpdate() {
    console.log('shouldComponentUpdate');                  # false的意思是 如果数据没有更新则下面的函数不会执行 提升性能
    return false;
        
}

componentWillUpdate() {
    console.log('componentWillUpdate');
}

# render(){}

componentDidUpdate() {
    console.log('componentDidUpdate');
}


# Unmount
 componentWillUnount(){
        console.log('componentWillUnmount');
}

vue:

<template>
	<h2>当前求和为：{
   
   {sum}}</h2>
	<button @click="sum++">点我+1</button>
</template>

<script>
	import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from 'vue'
	export default {
		name: 'Demo',
		
		setup(){
			console.log('---setup---')
			//数据
			let sum = ref(0)

			//通过组合式API的形式去使用生命周期钩子
			onBeforeMount(()=>{
				console.log('---onBeforeMount---')
			})
			onMounted(()=>{
				console.log('---onMounted---')
			})
			onBeforeUpdate(()=>{
				console.log('---onBeforeUpdate---')
			})
			onUpdated(()=>{
				console.log('---onUpdated---')
			})
			onBeforeUnmount(()=>{
				console.log('---onBeforeUnmount---')
			})
			onUnmounted(()=>{
				console.log('---onUnmounted---')
			})

			//返回一个对象（常用）
			return {sum}
		},
		//通过配置项的形式使用生命周期钩子
		//#region 
		beforeCreate() {
			console.log('---beforeCreate---')
		},
		created() {
			console.log('---created---')
		},
		beforeMount() {
			console.log('---beforeMount---')
		},
		mounted() {
			console.log('---mounted---')
		},
		beforeUpdate(){
			console.log('---beforeUpdate---')
		},
		updated() {
			console.log('---updated---')
		},
		beforeUnmount() {
			console.log('---beforeUnmount---')
		},
		unmounted() {
			console.log('---unmounted---')
		},
		//#endregion
	}
</script>

总结：他们两个最大的不同就是react的生命周期几乎都以component开头,而新版vue在setup中以on开头且vue的生命周期没有component这个单词的。