vue2的8个生命周期和vue3对应的8个生命周期
1:onBeforeMount
onMounted
代码语言：javascript复制<template>
<div class="about">
<h1>vue3的生命周期</h1>
<div id="dom">{{msg}}</div>
</div>
</template>
<script>
import { reactive, toRefs, onBeforeMount, onMounted } from "vue";
export default ({
setup() {
const data = reactive({
msg: "你好",
});
//数据渲染前
onBeforeMount(() => {
console.log("onBeforeMount",document.querySelector("#dom"))
});
//数据渲染后
onMounted(() => {
console.log("onMounted",document.querySelector("#dom"))
});
return {
...toRefs(data),
};
},
});
</script>
2：onBeforeUpdate,onUpdated dom更新前和dom更新后 2s过后，触发onBeforeUpdate,onUpdated
代码语言：javascript复制<template>
<div class="about">
<h1>vue3的生命周期</h1>
<div id="dom">{{ msg }}</div>
</div>
</template>
<script>
import {
reactive,
toRefs,
onBeforeMount,
onMounted,
onBeforeUpdate,
onUpdated,
} from "vue";
export default {
setup() {
const data = reactive({
msg: "你好",
});
//数据渲染前
onBeforeMount(() => {
console.log("onBeforeMount", document.querySelector("#dom"));
});
//数据渲染后
onMounted(() => {
console.log("onMounted", document.querySelector("#dom"));
setTimeout(() => {
data.msg = "hello";
}, 2000);
});
//dom更新前
onBeforeUpdate(() => {
console.log("onBeforeUpdate", document.querySelector("#dom"));
});
//dom更新后
onUpdated(() => {
console.log("onUpdated", document.querySelector("#dom"));
});
return {
...toRefs(data),
};
},
};
</script>
