Web前端开发之VUE06——生命周期、钩子函数

最新推荐文章于 2024-05-12 01:43:01 发布

原创最新推荐文章于 2024-05-12 01:43:01 发布 · 644 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #node.js #vue

Web前端开发——Vue 专栏收录该内容

25 篇文章

订阅专栏

本文详细解析了Vue3的组件生命周期，包括create、mount、update和unmount四个阶段的钩子函数，以及它们在不同阶段的应用场景。通过示例代码展示了如何在各个阶段进行操作，并演示了Vue3中组件的卸载过程。此外，还涵盖了beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount和unmounted等关键钩子的用法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

生命周期：

钩子函数：

完整阶段:

生命周期：

钩子函数：

create阶段：

mount阶段:

update阶段:

unmount阶段:

在vue3中destroy已被弃用,所以我们使用卸载阶段替代.

在main.js中使用如下代码,测试卸载过程.

setTimeout(()=>{
  app.unmount()
},5000)

完整阶段:

<template>
  <div>
    <div class="mountTest">我是模板div</div>
    <button @click="changeNum">{{num}}</button>
    <destoryhook></destoryhook>
  </div>
</template>
<script>
import {getRandInt} from "@/assets/JS/MyTools";
import destoryHook from "@/components/tutorialUse/destoryHook";

export default {
  data() {
    return {
      num: 100
    }
  },
  methods:{
    changeNum(){
      this.num=getRandInt(0,100)
    }
  },
  components:{
    destoryhook:destoryHook
  },
  //本阶段处于初始化之前的阶段,这里VUE会初始化一些参数
  //这一阶段,如data和methods等均未开始构建
  //场景:由于是初始化之前,本阶段默认的生命周期钩子和默认事件可以进行操作
  beforeCreate() {
    console.log('create前调用:' + this.num)
  },
  //本阶段处于初始化后的阶段,data和methods构建完毕
  //场景:一般需要页面加载前绑定的方法都会在此建立
  created() {
    console.log('create时调用:' + this.num)
  },
  //vue挂载之前,这一阶段dom组件还未载入页面
  //这一阶段我们可以处理一些data中数据变动
  //场景:这里我们可以操作data和methods,这里操作不会触发update钩子
  beforeMount() {
    console.log('mount前调用:' + document.querySelector('.mountTest'))
  },
  //vue挂载之后,这一阶段页面已加载,可以获得真实的页面dom组件
  //场景:这里我们可以直接操作一些dom实体
  mounted() {
    console.log('mount后调用:' + document.querySelector('.mountTest').innerText)
  },
  //update阶段很特殊,是一个循环阶段,因为页面中只要有元素更新,其就会执行一次阶段的始末
  //update阶段是在dom操作更新前后跳出执行
  //场景:在更新元素时,调用或者更新一些东西
  beforeUpdate() {
    console.log('我在修改元素前执行')
    console.log('当前页面未更新前按钮内为:'+document.querySelector('button').innerText)
  },
  //更新完毕之后
  //场景:更新元素之后,调用或者更新一些东西
  updated() {
    console.log('我在修改元素后执行')
    console.log('当前页面更后按钮内为:'+document.querySelector('button').innerText)
  },
  //destroy已被弃用,使用卸载unmount替代
  beforeUnmount() {
    console.log('input即将被卸载')
  },
  unmounted() {
    console.log('input已卸载')
  }

}
</script>
<style>

</style>

以上代码就是整个生命周期阶段的解读和代码.