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

一、生命周期简介

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>

执行结果：