server 2012 做网站常州市新北区建设与管理局网站
文章目录
- 前言
- 钩子函数
- 代码展示1
- 代码展示2
前言
组件从创建到销毁的整个过程就是生命周期
钩子函数
提示：VUE3生命周期：
1、创建初始化
- 实例创建之前：beforeCreate
- 实例创建完毕：created
2、DOM挂载
- DOM挂载之前：beforeMount
- DOM挂载完毕：mounted
3、数据更新
- 数据更新之前：beforeUpdate
- 数据更新完毕：updated
4、结束 DOM 卸载
- 结束 DOM 卸载之前：beforeUnmount
- 结束 DOM 卸载完毕：unmounted
每一个阶段都有两个钩子函数，每一个钩子函数都是一个配置项
最常用的是：mounted 函数
实际应用中，在挂载完成钩子函数中，要发送请求给后端程序，获取后端返回的真实数据
代码展示1
使用Vue.js实现生命周期演示页面
提示：以下是本篇文章正文内容，下面案例可供参考
下面代码展示了Vue.js框架中，不同生命周期钩子函数的基本功能和使用方法，以及如何在不同的阶段执行相应的操作。
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><div id="app"><h1>创建初始化 挂载 更新 结束挂载----（vue生命周期）</h1><h1 @click="f1">{{name}}</h1><p v-for="(item, index) in businesslist">{{item}}</p></div>
</body>
<script src="../js/vue3.js"></script>
<script>let vm = Vue.createApp({data() {return {name: '猫抓',gamelist: []}},methods: {f1(){this.name = this.name+'老鼠'}},beforeCreate() {console.log('创建初始化之前');},created() {console.log('创建初始化完成');},beforeMount() {console.log('挂载之前');},mounted() {console.log('挂载完成');// 实际应用中，在挂载完成钩子函数中，要发送请求给后端程序，获取后端返回的真实数据this.gamelist.push('汤姆')this.gamelist.push('杰瑞')this.gamelist.push('斯派克')},beforeUpdate() {console.log('更新之前');},updated() {console.log('更新结束');},beforeUnmount() {console.log('结束挂载之前');},unmounted() {console.log('结束挂载完成');},})vm.mount('#app')
</script>
</html>
输出效果：
在控制台输入vm . unmount()结束（实例名字叫vm）
上面的代码是一个使用Vue.js实现生命周期演示页面的示例。
其中包括了Vue.js提供的生命周期钩子函数，分别是：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。
这些钩子函数会在不同的阶段被调用，用于对应阶段的操作。
在页面中，定义了一个id为"app"的div容器，其中包含了一个标题和一个通过v-for指令遍历businesslist数组的p标签。
在Vue实例中，定义了两个数据属性：name 和 gamelist（模拟猫和老鼠游戏为例），以及一个方法f1。对应的生命周期钩子函数中分别输出了相应的信息，以便在控制台中查看功能实现的过程。
代码展示2
引入
创建：setup
挂载：onBeforeMount、onMounted
更新：onBeforUpdate、onUpdated 、
卸载：onBeforeUnmount、onUnmounted
