Vue3 setup中使用生命周期函数

作者：温新

时间：2021-08-22

hi，我是温新，一名PHPer

setup中使用生命周期函数需要加上on。

因为 setup 是围绕 beforeCreate 和 created 生命周期钩子运行的，所以不需要显式地定义它们。换句话说，在这些钩子中编写的任何代码都应该直接在 setup 函数中编写。

生命周期函数有：onBeforeMount、onMounted、onBeforeUpdate、onUpdated、onBeforeUnmount、onUnmounted、onErrorCaptured、onRenderTracked、 onRenderTriggered、onActivated、onDeactivated。

<div id="app"></div>

<script>
	const app = Vue.createApp({

		setup() {
			const {
				onBeforeMount,
				onMounted,
				onBeforeUpdate,
				onUpdated,
				onRenderTriggered,
			} = Vue;

			onBeforeMount( () => {
				console.log('before-mount');
			});
			onMounted( () => {
				console.log('mounted');
			});	
			onBeforeUpdate( () => {
				console.log('before-update');
			});
			onUpdated( () => {
				console.log('updated');
			});
		}
	});
	const vm = app.mount('#app');
</script>

我是温新

每天进步一点，就一点点