【笔记】Vue3的组件的生命周期函数

发表于 更新于 分类于 阅读次数：

前言

Vue3的组件的生命周期函数学习笔记

OptionsAPI

1
2
3
4
5
6
7
8
9
10
11
12
<script>
  export default {
    beforeCreate: function () {},
    created: function () {},
    beforeMount: function () {},
    mounted: function () {},
    beforeUpdate: function () {},
    updated: function () {},
    beforeUpmount: function () {},
    upmounted: function () {}
  };
</script>

created时的侦听操作

第一个参数：定义侦听的变量名
第二个参数：定义回调函数
第三个参数：定义其他配置

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script>
  export default {
    data: function () {
      return {
        key: "value"
      }
    },
    created: function () {
      this.$watch(
          "key",
          function (newValue, oldValue) {},
          { deep: true }
      );
    }
  };
</script>

CompositionAPI

setup函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<script>
  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"

  export default {
    setup: function (attrs, slots, emit) {
      onBeforeMount(function () {});
      onMounted(function () {});
      onBeforeUpdate(function () {});
      onUpdated(function () {});
      onBeforeUnmount(function () {});
      onUnmounted(function () {});
    }
  };
</script>

setup语法糖

1
2
3
4
5
6
7
8
9
10
<script setup>
  import { onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted } from "vue"

  onBeforeMount(function () {});
  onMounted(function () {});
  onBeforeUpdate(function () {});
  onUpdated(function () {});
  onBeforeUnmount(function () {});
  onUnmounted(function () {});
</script>

完成