想在VUE中构建企业就绪的应用程序吗？学习钩子。

vue中的生命周期挂钩是在vue.js中学习的最重要概念之一

使用VUE 3中的Vue 2和Vue 3中的钩子类似地工作。但是，当使用构图API时，您将面临一些更改，并增加更多的生命周期钩和Vue中的企业应用程序。

在本文中，您将学习VUE 3中的不同生命周期挂钩，如何使用它们以及如何将它们集成到您的企业应用程序中。

VUE 3生命周期钩的概述

生命周期挂钩是一种特殊功能，允许开发人员在发生特定事件之前或之后的任何特定时刻或之后钩住或创建自定义功能。

vue.js生命周期钩被分为6个主钩，进一步分为12个钩子。以下是6个主要事件：

让我们探索每个事件并学习每个事件下分类的钩子。

创建钩子

创建事件在组件的创建上运行。它主要用于设置您新创建的组件。

在创建事件下，您的挂钩等钩子：

beforecreate

在初始化所有反应性数据和事件之前，请调用beforeCreate钩。这使得beforeCreate事件无法访问组件的任何反应性数据和事件。

这是一个代码段，显示了如何在选项API中实现beforeCreate钩

export default {
  data() {
    return {
      val: "hello",
    };
  },
  beforeCreate() {
    console.log("Value of val is: " + this.val);
  },
};

在选项API中，beforeCreate钩非常重要，当您要调用初始化数据或不需要分配数据

创建

created钩负责初始化所有反应性数据和事件。在created钩中，我们现在可以访问组件的数据和事件，因为它们已经初始化了。

这是一个代码段，显示了如何在选项API中实现created钩：

export default {
  data() {
    return {
      val: "hello",
    };
  },
  created() {
    console.log("Value of val is: " + this.val);
  },
};

created钩子对于初始化或调用API或逻辑也很有用，在安装组件之前需要调用一次，并且最重要的是created Hook可以分配数据，这使得为组件生成初始数据很重要。 /p>

在VUE 3组成API中，beforeCreate和created钩被setup方法本身替换。这意味着您的代码将在组合API中自动执行，而无需在beforeCreate或created Hook中明确调用它。

这是一个代码段，显示了如何在设置方法中明确调用代码或无需使用beforeCreate或created挂钩的函数或代码段，

<script>
import { ref } from 'vue'

export default {
  setup() {
    const val = ref('hello')

  // This will be called automatically by default
    console.log('Value of val is: ' + this.val)
  }
}
</script>

使用编译时间句法糖<script setup>也是如此。这是一个例子：

<script setup>
  const val = ref('hello') // This will be called automatically by default
  console.log('Value of val is: ' + this.val)
</script>

现在，您可以轻松地创建和直接调用您的功能，而不必担心是否在created或beforeCreated Hook中调用它们。

安装钩子

安装挂钩手柄安装和渲染组件，此类别中有重要的钩子，因为它们负责网页中元素的可见性。以下是应用中一些最常用的挂钩。

1. 登上
2. onbeforemount
3. 肿瘤

onMounted钩与选项API中的mounted挂钩相同，除了名称更改和在构图API中使用onMounted钩的方法。

下面是一个代码段

<script setup>
import { ref, onMounted } from 'vue'

const el = ref()

onMounted(() => {
  el.value // <div>
})
</script>

<template>
  <div ref="el"></div>
</template>

有一些有关使用onMounted钩的警告，例如：

1. 它可以在<Suspense>树内的异步组件或组件内使用
2. 它不能在服务器端渲染中或在服务器端渲染期间使用。
3. 必须与直接链接到父容器的直接父母或子容器进行调用。

onMounted钩用于执行需要访问组件渲染的DOM的副作用。这使得在所有元素和组件都完全安装和渲染后调用和更新业务逻辑很有用。

on beforemounted

onBeforeMounted钩是一个特殊的钩子，在安装组件之前就称为。要注意的一件重要的事情是，当调用此钩子时，组件已经完成设置其反应性状态。

这意味着您所在州的数据，ref，reactive已经初始化，但尚未向用户呈现DOM。

这是如何使用onBeforeMounted钩子的一个示例：

<script setup>
import { ref, onBeforeMounted } from 'vue'

onBeforeMounted(() => {
  console.log('Before Mounted Hook')
})
</script>

<template>
  <div ref="el"></div>
</template>

更新挂钩

此类别的挂钩是在组件更新之前，之前和之后的。此类别中有重要的挂钩，因为它们负责您网页中的元素重新渲染。

以下是应用中一些最常用的挂钩：

1. onbeforeupdate
2. 努力
3. 肿瘤

onBeForeupdate

由于来自反应性状态的更改或更新，在组件即将更新或重新渲染其DOM树之前，onBeforeUpdate钩被调用。

使用VUE时，您可以更新反应性数据，并立即实时查看更新。但是，这通常是关于反应性的甜蜜之处，但是，在使用新值更新组件之前，onBeforeUpdate被调用。

这是如何使用onBeforeUpdate钩的一个示例：

<script setup>
import { ref, onBeforeUpdate } from 'vue'

onBeforeUpdate(() => {
  console.log('Before Updated Hook')
})
</script>

<template>
  <div ref="el"></div>
</template>

updated

onUpdated挂钩是特殊且经常使用的，因为它在组件更新或重新呈现DOM树之后被称为DOM树。

这是如何使用onUpdated钩子的一个示例：

<script setup>
import { ref, onUpdated } from 'vue'

const count = ref(0)

onUpdated(() => {
  console.log(document.getElementById('count').textContent)
})
</script>

<template>
  <button id="count" @click="count++"></button>
</template>

这是一个简单的数字增量应用程序。当单击按钮并使用onUpdated钩记录count元素的值时，它会增加数字。

如果您有亲子组件结构，则在父母更新挂钩之前调用孩子onUpdated钩。

有时您可能需要访问导致更新的元素，因为您可能同时具有多个元素更新。您可以使用nextTick()实用程序访问特定元素。

也必须注意，如果将onUpdated钩子内的状态变异，则可以轻松地进入无限环路。

肿瘤

onActivated钩是Vue 3中的一个新增加。它非常特别，有助于通过VUE组件提高性能。

将组件实例从缓存中插入DOM树之后被调用。使用kecaches组件时，使用keepalive标签如下所示：

<KeepAlive>
  <component :is="view"></component>
</KeepAlive>

如所示，任何缓存的组件都将在 deactivated 状态中，当组件实例从DOM中删除时，而不是完全破坏组件并以后重新启动，将组件从高速缓存和激活。

<script setup>
  import {onActivated} from 'vue' onActivated(() =>{" "}
  {console.log("Activated hook is called")})
</script>

<script setup>
  import { ref, onBeforeUpdate } from 'vue'

   // Added onErrorCaptured lifecycle hook
   onErrorCaptured((error) => {

   // You can process the error here
   console.log(error)

     return true;
   });

</script>

<script setup>
  import {(ref, onRenderTracked)} from 'vue' const num = ref(0) const num2 =
  ref(0) // It will be called twice, once for num and once for num2
  onRenderTracked((event) => {console.log(event)})
</script>

<script setup>
  import {(ref, onRenderTracked)} from 'vue' const num = ref(0) // It will be
  called once the num is updated onRenderTriggered((event) =>{" "}
  {console.log(event)})
</script>

<script setup>
  import {(ref, onServerPrefetch)} from 'vue' const data = ref(null)
  onServerPrefetch(async () =>{" "}
  {
    // pre-fetch data on server as it is faster than on the client
    (data.value = await fetchOnServer(/* ... */))
  }
  )
</script>

<script setup>
  import {onUnmounted} from 'vue' let intervalId onMounted(() =>{" "}
  {
    (intervalId = setInterval(() => {
      // ...
    }))
  }
  ) onUnmounted(() => clearInterval(intervalId))
</script>

<script setup>
  import {onUnmounted} from 'vue' let intervalId onBeforeMount(() =>{" "}
  {
    (intervalId = setInterval(() => {
      // ...
    }))
  }
  ) onBeforeUnmount(() => clearInterval(intervalId))
</script>

<script setup>
  import {onDeactivated} from 'vue' onDeactivated(() =>{" "}
  {console.log("Deactivated hook is called")})
</script>