『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』 专栏,持续更新中
『未完待续』


相关推荐
Freedom风间4 小时前
前端优秀编码技巧
前端·javascript·代码规范
萌萌哒草头将军4 小时前
🚀🚀🚀 Openapi:全栈开发神器,0代码写后端!
前端·javascript·next.js
萌萌哒草头将军4 小时前
🚀🚀🚀 Prisma 爱之初体验:一款非常棒的 ORM 工具库
前端·javascript·orm
拉不动的猪5 小时前
SDK与API简单对比
前端·javascript·面试
runnerdancer5 小时前
微信小程序蓝牙通信开发之分包传输通信协议开发
前端
BillKu5 小时前
Vue3后代组件多祖先通讯设计方案
开发语言·javascript·ecmascript
山海上的风5 小时前
Vue里面elementUi-aside 和el-main不垂直排列
前端·vue.js·elementui
电商api接口开发5 小时前
ASP.NET MVC 入门指南二
前端·c#·html·mvc
亭台烟雨中5 小时前
【前端记事】关于electron的入门使用
前端·javascript·electron