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


相关推荐
mCell1 天前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip1 天前
Node.js 子进程:child_process
前端·javascript
excel1 天前
为什么在 Three.js 中平面能产生“起伏效果”?
前端
excel1 天前
Node.js 断言与测试框架示例对比
前端
天蓝色的鱼鱼1 天前
前端开发者的组件设计之痛:为什么我的组件总是难以维护?
前端·react.js
codingandsleeping1 天前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
石金龙1 天前
[译] Composition in CSS
前端·css
白水清风1 天前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
Ticnix1 天前
函数封装实现Echarts多表渲染/叠加渲染
前端·echarts
用户22152044278001 天前
new、原型和原型链浅析
前端·javascript