0
点赞
收藏
分享

微信扫一扫

Vue3.0商店后台管理系统项目实战-生命周期


vue2的8个生命周期和vue3对应的8个生命周期




Vue3.0商店后台管理系统项目实战-生命周期_vue.js


1:onBeforeMount

onMounted


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



Vue3.0商店后台管理系统项目实战-生命周期_开发语言_02


2:onBeforeUpdate,onUpdated
dom更新前和dom更新后
2s过后,触发onBeforeUpdate,onUpdated


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



Vue3.0商店后台管理系统项目实战-生命周期_vue.js_03


举报

相关推荐

0 条评论