从零开始学Vue3脚手架 (四)生命周期

原创已于 2024-05-14 18:03:00 修改 · 185 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#vue.js #前端 #javascript

于 2023-08-25 11:11:47 首次发布

VUE 3.0 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了Vue组件的生命周期过程，包括各阶段的钩子函数如beforeCreate、created、beforeMount等，以及它们在不同阶段的作用和应用场景。通过代码示例展示了这些生命周期函数的实际执行情况。

一、生命周期简介

1.1、什么是生命周期？

生命周期指的是一个对象从创建到销毁的过程

1.2、vue对象的状态及钩子函数

生命周期钩子：就是生命周期事件的别名而已；
生命周期钩子 = 生命周期函数 = 生命周期事件
主要的生命周期函数分类：
创建期间的生命周期函数：
- beforeCreate：实例刚在内存中被创建出来，此时，还没有初始化好 data 和 methods 属性
- created：实例已经在内存中创建OK，此时 data 和 methods 已经创建OK，此时还没有开始编译模板
- beforeMount：此时已经完成了模板的编译，但是还没有挂载到页面中
- mounted：此时，已经将编译好的模板，挂载到了页面指定的容器中显示
运行期间的生命周期函数：
- beforeUpdate：状态更新之前执行此函数，此时 data 中的状态值是最新的，但是界面上显示的数据还是旧的，因为此时还没有开始重新渲染DOM节点
- updated：实例更新完毕之后调用此函数，此时 data 中的状态值和界面上显示的数据，都已经完成了更新，界面已经被重新渲染好了！
销毁期间的生命周期函数：
- beforeUnmount：实例销毁之前调用。在这一步，实例仍然完全可用。
- unmounted：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

1.3、钩子函数

钩子函数	触发的行为	在此阶段可以做的事情
beforeCreate	vue实例的挂载元素$el和数据对象data都为undefined，还未初始化	加loading事件
created	vue实例的数据对象data有了，$el还没有	结束loading、请求数据为mounted渲染做准备
beforeMount	vue实例的$el和data都初始化了，但还是虚拟的dom节点，具体的data.filter还未替换。
mounted	vue实例挂载完成，data.filter成功渲染	配合路由钩子使用
beforeUpdate	data更新时触发
updated	data更新时触发	数据更新时，做一些处理（此处也可以用watch进行观测）
beforeUnmount	组件销毁时触发
unmounted	组件销毁时触发，vue实例解除了事件监听以及和dom的绑定（无响应了），但DOM节点依旧存在	组件销毁时进行提示

1.4、案例

<script>
export default {
  data() {
    return {
      message: "vue333"
    }
  },
  methods: {
    updateMessage() {
      // this:创建的vue实例
      this.message = "你好啊！！！"
    }
  },
  // 1. 实例生成之前会自动执行的函数,
  setup() {
    console.log('beforeCreate');
  },
  // 2. 实例生成之后会自动执行的函数
  created() {
    console.log('created');
  },
  // 3. 组件内容被渲染到页面之前自动执行的函数
  beforeMount() {
    console.log( 'beforeMount');
  },
  // 4. 组件内容被渲染到页面之后自动执行的函数
  mounted() {
    console.log(document.getElementById('root').innerHTML, 'mounted');
    this.$data.message = "456"
  },
  // 6. 数据发生变化后，页面重新渲染后，会自动执行的函数
  updated() {
    console.log(document.getElementById('root').innerHTML, 'updated');
  },
  // 7. 当 Vue 应用失效时，会自动执行的函数
  beforeUnmount() {
    alert("vue3");
    console.log(document.getElementById('root').innerHTML, 'beforeUnmount');
    alert("vue3");
  },
  // 8. 当 Vue 应用失效时，且 dom 完全销毁之后，自动执行的函数
  unmounted() {
    console.log(document.getElementById('root').innerHTML, 'unmounted');
  }

}
</script>

<template>
  <!-- template中可以添加多个子标签，但是推荐大家将内容放在一个div标签中！ -->
  <div id="root">
    {{ message }}
    <button @click="updateMessage()">修改messge的值</button>
  </div>
</template>

<style scoped>

</style>

执行结果：