1. beforeCreate
在 Vue 3.0 中，beforeCreate 生命周期钩子被替换为 setup 函数内的执行代码。这是在组件实例被创建之前执行的地方。
<script>
export default {
setup() {
console.log('setup is called before component is created');
},
};
</script>
2. created
在 Vue 3.0 中，created 生命周期钩子的逻辑也应该放在 setup 函数内。
<script>
export default {
setup() {
console.log('setup is called after component is created');
},
};
</script>
3. beforeMount
在 Vue 3.0 中，beforeMount 生命周期钩子对应于 onBeforeMount 函数。
<script>
import { onBeforeMount } from 'vue';
export default {
setup() {
onBeforeMount(() => {
console.log('Component is about to be mounted');
});
},
};
</script>
4. mounted
在 Vue 3.0 中，mounted 生命周期钩子对应于 onMounted 函数。
<script>
import { onMounted } from 'vue';
export default {
setup() {
onMounted(() => {
console.log('Component is mounted');
});
},
};
</script>
5. beforeUpdate
在 Vue 3.0 中，beforeUpdate 生命周期钩子对应于 onBeforeUpdate 函数。
<script>
import { onBeforeUpdate } from 'vue';
export default {
setup() {
onBeforeUpdate(() => {
console.log('Component is about to be updated');
});
},
};
</script>
6. updated
在 Vue 3.0 中，updated 生命周期钩子对应于 onUpdated 函数。
<script>
import { onUpdated } from 'vue';
export default {
setup() {
onUpdated(() => {
console.log('Component is updated');
});
},
};
</script>
7. beforeUnmount
在 Vue 3.0 中，beforeDestroy 生命周期钩子对应于 onBeforeUnmount 函数。
<script>
import { onBeforeUnmount } from 'vue';
export default {
setup() {
onBeforeUnmount(() => {
console.log('Component is about to be unmounted');
});
},
};
</script>
8. unmounted
在 Vue 3.0 中，destroyed 生命周期钩子对应于 onUnmounted 函数。
<script>
import { onUnmounted } from 'vue';
export default {
setup() {
onUnmounted(() => {
console.log('Component is unmounted');
});
},
};
</script>
总体来说，Vue 3.0 中的生命周期钩子在使用上基本保持了与之前版本的一致性，但是现在它们的使用方式更加灵活，更符合 Composition API 的理念。在 setup 函数中，你可以根据需要使用不同的生命周期函数。
转载请注明出处：http://www.zyzy.cn/article/detail/569/Vue 3.0