Vue3生命周期
2023-12-28 17:31:59
Vue3生命周期
Vue3与Vue2版本生命周期相对应的组合式API
- beforeCreate -> 使用 setup()
- created -> 使用 setup()
- beforeMount -> onBeforeMount
- mounted -> onMounted
- beforeUpdate -> onBeforeUpdate
- updated -> onUpdated
- beforeDestroy -> onBeforeUnmount
- destroyed -> onUnmounted
- errorCaptured -> onErrorCaptured
新增的钩子函数
组合式 API 还提供了以下调试钩子函数:
- onRenderTracked
- onRenderTriggered
<template>
<div class="about">
<h2>msg: {{msg}}</h2>
<hr />
<button @click="update">更新</button>
</div>
</template>
<script lang="ts">
import {
ref,
onMounted,
onUpdated,
onUnmounted,
onBeforeMount,
onBeforeUpdate,
onBeforeUnmount,
} from "vue";
export default {
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");
},
setup() {
const msg = ref("abc");
const update = () => {
msg.value += "--";
};
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 {
msg,
update,
};
},
};
</script>
<template>
<h2>App</h2>
<button @click="isShow=!isShow">切换</button>
<hr />
<Child v-if="isShow" />
</template>
<script lang="ts">
import Child from "./Child.vue";
export default {
data() {
return {
isShow: true,
};
},
components: {
Child,
},
};
</script>
文章来源:https://blog.csdn.net/weixin_42202992/article/details/135273845
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!