Vue3.0商店后台管理系统项目实战-生命周期
2023-06-13 09:14:11 时间
vue2的8个生命周期和vue3对应的8个生命周期
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>
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>
相关文章
- Python项目46-xadmin管理后台数据(强撸)
- IOS 禁止应用后台扫描相册
- 电商项目基本业务概述||电商后台管理系统的功能|| 电商后台管理系统的开发模式(前后端分离)|| 电商后台管理系统的技术选型[通俗易懂]
- WordPress 非常好用的后台优化加速插件
- 【说站】百度统计后台百度索引量没有数据是什么原因
- Vue3.0商店后台管理系统项目实战-vuex是什么(5大语法)
- Vue3.0商店后台管理系统项目实战-路由守卫(登录状态储存)
- Vue3.0商店后台管理系统项目实战-导航的icon图标
- Java项目分享-10个超好看后台管理面板,再也不愁UI了
- Vue3.0商店后台管理系统项目实战-axios的封装
- 如何利用Python杀进程并保持驻留后台检测
- SAP Gateway 后台模型的缓存设置
- Flutter 3.7 新特性:介绍后台isolate通道
- fastadmin后台 点击开关 弹出 你没有权限访问 角色组里面添加了,除了超级管理员其他的只要用状态开关就,没权限 解决办法
- Typecho博客忘记后台登录密码解决办法
- 利用Redis提升后台运行效率(redis后台运行)
- 后台启动Redis更高效的缓存存储实现(后台启动 redis)