|
|
@@ -0,0 +1,58 @@
|
|
|
+<template>
|
|
|
+ <div id="demo14">
|
|
|
+ <h1>生命周期</h1>
|
|
|
+ <div id="box">{{ a }}</div>
|
|
|
+ <button @click="changeMain">修改</button>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<!--
|
|
|
+ vue2:
|
|
|
+ 初始：
|
|
|
+ beforeCreate created
|
|
|
+ 运行:
|
|
|
+ 挂载：beforeMount mounted
|
|
|
+ 更新: beforeUpdate updated
|
|
|
+ 销毁:
|
|
|
+ beforeDestory destoryed
|
|
|
+ vue3:
|
|
|
+ 初始：
|
|
|
+ setup
|
|
|
+ 运行:
|
|
|
+ 挂载：onBeforeMount onMounted
|
|
|
+ 更新: beforeUpdate updated
|
|
|
+ 卸载:
|
|
|
+ onBeforeUnmount onUnmounted
|
|
|
+
|
|
|
+
|
|
|
+-->
|
|
|
+<script lang="ts" setup>
|
|
|
+import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted} from "vue"
|
|
|
+let a = ref(1);
|
|
|
+function changeMain() {
|
|
|
+ a.value = 12;
|
|
|
+}
|
|
|
+onMounted(()=>{
|
|
|
+ console.log("挂载后",document.getElementById("demo14"));
|
|
|
+})
|
|
|
+
|
|
|
+onBeforeMount(()=>{
|
|
|
+ console.log("挂载前",document.getElementById("demo14"));
|
|
|
+})
|
|
|
+onBeforeUpdate(()=>{
|
|
|
+ console.log("更新前",document.getElementById("box")?.innerHTML);
|
|
|
+})
|
|
|
+
|
|
|
+onUpdated(()=>{
|
|
|
+ console.log("更新后",document.getElementById("box")?.innerHTML);
|
|
|
+})
|
|
|
+onBeforeUnmount(()=>{
|
|
|
+ console.log("卸载前");
|
|
|
+})
|
|
|
+
|
|
|
+onUnmounted(()=>{
|
|
|
+ console.log("卸载后");
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+</style>
|
zheng