Vue3 setup中使用生命周期函数

作者: 温新

分类: 【Vue.js】

阅读: 8757

时间: 2021-08-22 12:34:44

作者:温新

时间:2021-08-22

hi,我是温新,一名PHPer

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

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

生命周期函数有:onBeforeMountonMountedonBeforeUpdateonUpdatedonBeforeUnmountonUnmountedonErrorCapturedonRenderTrackedonRenderTriggeredonActivatedonDeactivated

<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>

我是温新

每天进步一点,就一点点

请登录后再评论