vue3 生命周期函数，都改了啥？

vue2到3常用生命周期钩子函数的变化

Ⅰ. 实例化 和 数据初始化 （beforeCreate，created => setup）

1. new Vue 从开始 => 结束 [vue2和3 、两版本区别处]
vue2的写法=>

export default {
  	beforeCreate(){
		console.log('vue的实例 还没new出来！');
	},
  	created(){
		console.log('new Vue() => 成功 watch,computed,方法,监听事件 配置完毕');
	}
}
1
2
3
4
5
6
7
8

应用场景及注意：
① 在created 后，还无法获取dom ，rander函数还未执行！
② 一般用于判断用户是否有这个，页面权限，在没有该权限前进行阻止，或跳转其他页面。

vue3的写法=>
beforeCreate => 使用 setup()
created => 使用 setup()

export default {
	setup(){
   		console.log('setup 中 相当于在beforeCreate和created 之间');
	}
}
1
2
3
4
5

---

Ⅱ. 实现视图渲染 （beforeMounted 、mounted）

1. rander函数首次调用 => 结束
vue2的写法=>

export default {
  	beforeMount(){
		console.log('开始 rander 函数，渲染dom ');
	},
  	mounted(){
		console.log('dom渲染完成 ，可以获取dom ');
	}
}
1
2
3
4
5
6
7
8

应用场景及注意
1. dom元素从未创建 => 创建结束，mounted之后可以拿去dom .
2. 可以调用接口 ，初始话页面的数据 .

vue3的写法=>
beforeMount => onBeforeMount
mounted => onMounted

export default {
import { onMounted,onBeforeMount} from 'vue'
	setup() {
    	onBeforeMount(() => {
      		console.log('开始 rander 函数，渲染dom ');
    	})
    	onMounted(() => {
      		console.log('dom渲染完成 ，可以获取dom ');
    	})
	}
}
1
2
3
4
5
6
7
8
9
10
11

---

Ⅲ. 页面数据发生更新（beforeUpdate，update）

1. 响应数据发生变化是触发
vue2的写法=>

export default {
  	beforeUpdate(){
		console.log('data中的变量, 要改变了 ');
	},
  	update(){
		console.log('data中的变量，发生改变');
	}
}
1
2
3
4
5
6
7
8

应用场景及注意：
1. update的使用场景并不多，而且无法准确知道是那个变量触发了更新

vue3的写法=>
beforeUpdate => onBeforeUpdate
update => onUpdate

export default {
import { onMounted,onBeforeMount} from 'vue'
	setup() {
    	onBeforeUpdate(() => {
			console.log('ref 或 reactive 创建的变量, 要改变了 ');
    	})
    	onUpdate(() => {
			console.log('ref 或 reactive 创建的变量, 发生改变');
    	})
	}
}
1
2
3
4
5
6
7
8
9
10
11

---

Ⅳ. 组件卸载时（beforeDestroy，destroyed => beforeUnmount，unmounted）

1. 关闭或离开该组件触发 [vue2和3 、两版本区别处]
vue2的写法=>

export default {
  	beforeDestroy(){
		console.log('将要离开该组件');
	},
  	destroyed (){
		console.log('已经离开组件');
	}
}
1
2
3
4
5
6
7
8

应用场景及注意：
1. 处理离开组件的一些逻辑，比如清楚定时器，调用退出用户的接口 == 。

vue3的写法=>
beforeDestroy => beforeUnmount
destroyed => unmounted

export default {
import { onMounted,onBeforeMount} from 'vue'
	setup() {
    	beforeUnmount(() => {
			console.log('将要离开该组件');
    	})
    	unmounted(() => {
			console.log('已经离开组件');
    	})
	}
}
1
2
3
4
5
6
7
8
9
10
11

---

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁