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


相关推荐
灿灿121389 分钟前
CSS 文字浮雕效果:巧用 text-shadow 实现 3D 立体文字
前端·css
烛阴27 分钟前
Babel 完全上手指南:从零开始解锁现代 JavaScript 开发的超能力!
前端·javascript
AntBlack1 小时前
拖了五个月 ,不当韭菜体验版算是正式发布了
前端·后端·python
31535669131 小时前
一个简单的脚本,让pdf开启夜间模式
前端·后端
尘心cx1 小时前
前端-CSS-day1
前端·css
知否技术1 小时前
前端常说的 SCSS是个啥玩意?一篇文章给你讲的明明白白!
前端·scss
CN-Dust1 小时前
[FMZ][JS]第一个回测程序--让时间轴跑起来
javascript
盛夏绽放1 小时前
Vue3 中 Excel 导出的性能优化与实战指南
vue.js·excel
幼儿园技术家1 小时前
Uniapp简易使用canvas绘制分享海报
前端
开开心心就好2 小时前
免费PDF处理软件,支持多种操作
运维·服务器·前端·spring boot·智能手机·pdf·电脑