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这个单词的。