『VUE』30. 生命周期的介绍(详细图文注释)

目录


欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中

生命周期

每个 Vue 组件实例在创建时都需要经历一系列的初始化步骤,比如设置好数据侦听,编译模板,挂载实例到 DOM,以及在数据改变时更新 DOM。在此过程中,它也会运行被称为生命周期钩子的函数,让开发者有机会在特定阶段运行自己的代码。


生命周期的8阶段

html 复制代码
  beforeCreate() {
    console.log("创建之前~");
  },
  created() {
    console.log("创建完毕");
  },
  beforeMount() {
    console.log("挂载之前");
  },
  mounted() {
    console.log("挂载完毕");
  },
  beforeUpdate() {
    console.log("更新之前");
  },
  updated() {
    console.log("更新完毕");
  },
  beforeUnmount() {
    console.log("销毁之前");
  },
  unmounted() {
    console.log("销毁完毕");
  },

生命周期小例子

我们更新数据后就会自动触发更新之前和更新之后的方法

修改了message之前

修改了message之后

app.vue

html 复制代码
<template>
  <h3>生命周期</h3>
  <p>{{ message }}</p>
  <button @click="updatedData">修改数据</button>
</template>

<script>
export default {
  data() {
    return {
      message: "qwer",
    };
  },
  methods: {
    updatedData() {
      this.message = this.message + "asdf";
    },
  },
  beforeCreate() {
    console.log("创建之前~");
  },
  created() {
    console.log("创建完毕");
  },
  beforeMount() {
    console.log("挂载之前");
  },
  mounted() {
    console.log("挂载完毕");
  },
  beforeUpdate() {
    console.log("更新之前");
  },
  updated() {
    console.log("更新完毕");
  },
  beforeUnmount() {
    console.log("销毁之前");
  },
  unmounted() {
    console.log("销毁完毕");
  },
};
</script>

总结

大家喜欢的话,给个👍,点个关注!给大家分享更多计算机专业学生的求学之路!

版权声明:

发现你走远了@mzh原创作品,转载必须标注原文链接

Copyright 2024 mzh

Crated:2024-3-1

欢迎关注 『VUE』 专栏,持续更新中
欢迎关注 『VUE』 专栏,持续更新中
『未完待续』


相关推荐
幻灵尔依19 分钟前
前端编码统一规范
javascript·vue.js·代码规范
欢脱的小猴子19 分钟前
VUE3加载cesium,导入czml的星座后页面卡死BUG 修复
前端·vue.js·bug
高级测试工程师欧阳21 分钟前
CSS 基础概念
前端·css·css3
前端小巷子21 分钟前
JS 实现图片瀑布流布局
前端·javascript·面试
Juchecar28 分钟前
AI教你常识之 npm / pnpm / package.json
前端
薛定谔的猫235 分钟前
前端工程化系列(一):编码规范相关
前端·代码规范·前端工程化
ZKshun38 分钟前
[ 前端性能优化 - 图片压缩 ] WebP格式的的图片性能到底有多优秀?
前端
杜蒙42 分钟前
React Hooks 详解
前端·javascript
南囝coding42 分钟前
Claude Code 从入门到精通:最全配置指南和工具推荐
前端·后端
索马里亚纳海参炒贩43 分钟前
useCallback useMemo memo 三个区别和作用
前端·react native