Vue3条记——（二）

015 生命周期
组件的生命周期：
【时刻】 【调用特定的函数】
vue2生命周期
创建 beforeCreate、 created
挂载 beforeMounte、mounted
更新 beforeUpdate、updated
烧毁 beforeDestroy、destroyed
生命周期、生命周期函数、生命周期钩子
vue3生命周期
创建 setup
挂载 onBeforeMounte、onMounted
更新 onBeforeUpdate、onUpdated
烧毁 onBeforeUnmounte、onUnmounted

1. <template>
2.     <div>
3.         <h2>当前求和{{ sum }}</h2>
4.         <button @click="addFn">点我sum+1</button>
5.     </div>
6. </template>

复制代码

1. <script setup lang="ts" name="person">
2. import { ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from 'vue'
3. // 数据
4. let sum = ref(0);
5. // 方法
6. function addFn() {
7.     sum.value++;
8. }
9. // 创建
10. console.log("创建");
11. // 挂载前，调用onBeforeMount中的回调函数
12. onBeforeMount(() => {
13.     console.log("挂载前");
14. });
15. onMounted(() => {
16.     console.log("挂载完毕");
17. })
18. // 更新前
19. onBeforeUpdate(() => {
20.     console.log("更新前");
21. })
22. // 更新后
23. onUpdated(() => {
24.     console.log("更新后");
25. })
26. // 卸载前
27. onBeforeUnmount(() => {
28.     console.log("卸载前");
29. })
30. // 卸载后
31. onUnmounted(() => {
32.     console.log("卸载后");
33. })
34. </script>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。