vue3的生命周期函数

 

目录

从Vue2转换到Vue3

什么是Composition API

生命周期钩子的使用

watch

新的调试钩子函数

---

Vue2和Vue3中的生命周期钩子函数非常相似——我们仍然可以访问相同的钩子函数，并且我们仍然希望将它们用于相同的用例。

但是，随着Composition API的引入，我们访问这些钩子函数的方式已经改变。

到本文结束时，你将了解在Vue3中使用生命周期钩子函数的新方法，并开始编写更好的代码。

从Vue2转换到Vue3

这个方便的Vue2到Vue3的生命周期映射直接来自于Vue3 Composition API 文档，我认为这是一种最有用的方式来查看事情将如何变化，以及我们如何使用它们。

• beforeCreate -> use setup()
• created -> use setup()
• beforeMount -> onBeforeMount
• mounted -> onMounted
• beforeUpdate -> onBeforeUpdate
• updated -> onUpdated
• beforeDestroy -> onBeforeUnmount
• destroyed -> onUnmounted
• errorCaptured -> onErrorCaptured

什么是Composition API

如果你还不知道，Vue3 Composition API 附带了一个 setup() 方法。此方法封装了我们的大多数组件代码，并处理了响应式，生命周期钩子函数等。

简而言之，Composition API使我们能够更好地将代码组织为更多的模块化功能，而不是根据属性的类型（方法，计算的数据）进行分离。

在旧的 beforeCreate 钩子函数之后和 created 的钩子函数之前立即调用 setup 方法。因此，我们不再需要这两个钩子，我们可以简单地将本应有的代码放在 setup() 方法中。

生命周期钩子的使用

与Vue3中的大多数功能一样，生命周期钩子是我们必须导入到项目中的东西，这是为了帮助使项目尽可能轻巧。

我们导入生命周期钩子的方式是这样的。

import { onMounted, onUpdated, onUnmounted } from 'vue'

Vue3中的钩子函数都在 setup() 中调用。computed，watch 可直接调用

<script lang="ts">
import { computed, ref, onBeforeMount, onMounted, onBeforeUpdate, onUpdated, onBeforeUnmount, onUnmounted, onActivated, onDeactivated, onErrorCaptured,} from "vue";

export default {
  setup() {
    onBeforeMount(() => {
      // ...
    });
    onMounted(() => {
      // ...
    });
    onBeforeUpdate(() => {
      // ...
    });
    onUpdated(() => {
      // ...
    });
    onBeforeUnmount(() => {
      // ...
    });
    onUnmounted(() => {
      // ...
    });
    onActivated(() => {
      // ...
    });
    onDeactivated(() => {
      // ...
    });
    onErrorCaptured(() => {
      // ...
    });
  },
  functionName() {
    const count = ref(0);
    const double = computed(() => {
      return count.value * 2;
    });
  },
};
</script>

watch

watch 接收两个参数，第一个参数是监听的属性，多个属性可传入数组， 第二个参数是一个回调函数，回调函数有两个参数（newVal, oldVal）；当 watch 的第一个参数是一个数组时，newVal 与 oldVal 对应的也是数组形式，一一对应。

// 监听count
watch('count', (newVal, oldVal) => {
    console.log('newVal:', newVal)
    console.log('oldVal:', oldVal)
})
// 监听多个属性值
watch(['count', 'name'], (newVal, oldVal) => {
    console.log('newVal:', newVal) // 数组
    console.log('oldVal:', oldVal) // 数组
})

 如果是需要监听定义在 reacitive 对象中的单一属性，需要通过函数返回值来进行监听

watch(() => data.count, (newVal, oldVal) => {
    console.log('newVal:', newVal)
    console.log('oldVal:', oldVal)
})

新的调试钩子函数

们还可以在Vue3中使用两个全新的钩子函数来进行调试。他们是：

• onRenderTracked
• onRenderTriggered

这两个事件都带有一个DebuggerEvent，它使我们能够知道是什么导致了Vue实例中的重新渲染。

export default {
  onRenderTriggered(e) {
    debugger
    // 检查哪个依赖项导致组件重新呈现
  }
}

原文链接：onmounted vue3_如何在Vue3中使用生命周期函数_weixin_39897392的博客-CSDN博客