Vue3의 라이프사이클 후크 기능에 대한 자세한 설명: Vue3 라이프사이클 적용에 대한 포괄적인 숙달

Vue3의 라이프사이클 후크 기능에 대한 자세한 설명: Vue3 라이프사이클 애플리케이션의 포괄적인 숙달

인기 있는 JavaScript 프레임워크인 Vue는 항상 폭넓은 관심과 사랑을 받아왔습니다. Vue3의 출시와 함께 라이프사이클 후크 기능도 일부 변경 및 최적화되었습니다. Vue3의 라이프사이클 후크 기능을 이해하는 것은 프런트엔드 개발자에게 매우 중요합니다. 이번 글에서는 Vue3의 Life Cycle Hook 기능과 그 적용에 대해 자세히 소개하겠습니다.

Vue3의 라이프 사이클 후크 기능

Vue3의 라이프 사이클 후크 기능도 생성, 마운트, 업데이트, 소멸의 4단계로 나뉩니다. 아래에서는 Vue3의 4단계 Life Cycle Hook 기능과 사용법을 자세히 소개하겠습니다.

생성 단계

생성 단계에서 Vue3는 setup() 및 onBeforeMount()라는 두 가지 수명 주기 후크 기능을 제공합니다. setup()和onBeforeMount()。

setup()

setup()是Vue3引入的新的生命周期钩子函数，在Vue3中代码中必须要有这个函数，setup()函数会在组件初始化的时候执行，其主要目的是用于设置组件的数据和方法等。

setup()函数的使用方式与Vue2.x中的data和methods类似，我们可以在setup()函数中声明组件需要使用的数据和方法，如下所示：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用了const关键字声明了一个名为message的变量，该变量的值为'Hello, Vue3!'，然后将其返回，在模板中使用{{ message }}就可以渲染出文本内容。

onBeforeMount()

onBeforeMount()生命周期钩子函数与Vue2.x中的beforeMount()类似，表示组件在挂载到DOM之前的事件，它会在setup()函数执行之后执行。

下面是一个使用onBeforeMount()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
export default {
  setup() {
    const message = 'Hello, Vue3!'
    return {
      message
    }
  },
  onBeforeMount() {
    console.log('组件挂载前执行')
  }
}
</script>

上面的例子中，onBeforeMount()函数会在组件模板挂载到DOM之前执行，在控制台输出 组件挂载前执行。

挂载阶段

在挂载阶段中，Vue3提供了两个生命周期钩子函数：onMounted()和onBeforeUpdate()。

onMounted()

onMounted()与Vue2.x中的mounted()类似，表示组件挂载到DOM后的事件，它会在setup()函数执行之后执行。

下面是一个使用onMounted()的例子：

<template>
  <div ref="box">{{ message }}</div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onMounted(() => {
      console.log('组件已经挂载到DOM上')
      console.log(this.$refs.box)
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onMounted()函数，在组件挂载之后输出 组件已经挂载到DOM上，以及组件中的div元素的引用。

onBeforeUpdate()

onBeforeUpdate()与Vue2.x中的beforeUpdate()类似，表示组件在更新之前的事件，它会在组件的状态发生改变之后、视图开始重新渲染之前执行。

下面是一个使用onBeforeUpdate()的例子：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onBeforeUpdate(() => {
      console.log('组件即将更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onBeforeUpdate()函数，在组件更新之前输出当前消息的值。

更新阶段

在更新阶段中，Vue3提供了两个生命周期钩子函数：onUpdated()和onDeactivated()。

onUpdated()

onUpdated()与Vue2.x中的updated()类似，表示组件在更新之后的事件，它会在组件的状态发生改变之后、视图重新渲染之后执行。

下面是一个使用onUpdated()的例子：

<template>
  <div>{{ message }}</div>
  <button @click="changeMessage">修改消息</button>
</template>

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

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    const changeMessage = () => {
      message.value = 'Hello, World!'
    }

    onUpdated(() => {
      console.log('组件已更新，当前消息为：' + message.value)
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUpdated()函数，在组件更新之后输出当前消息的值。

onDeactivated()

onDeactivated()与Vue2.x中的deactivated()类似，表示组件被激活后的事件，它会在组件从激活状态切换到非激活状态时执行。

下面是一个使用onDeactivated()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onDeactivated, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onDeactivated(() => {
      console.log('组件被激活')
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onDeactivated()函数，在组件被激活时输出 组件被激活。

销毁阶段

在销毁阶段中，Vue3提供了一个生命周期钩子函数：onUnmounted()。

onUnmounted()

setup()🎜🎜setup()은 Vue3에서 도입한 새로운 라이프 사이클 후크 함수입니다. 이 함수는 Vue3의 코드인 setup에 포함되어야 합니다. () 함수는 컴포넌트가 초기화될 때 실행됩니다. 주요 목적은 컴포넌트의 데이터와 메소드를 설정하는 것입니다. 🎜🎜 setup() 함수의 사용법은 Vue2.x의 data 및 methods와 유사합니다. setup()을 사용할 수 있습니다. 아래 표시된 대로 구성 요소가 함수에서 사용해야 하는 데이터와 메서드를 선언합니다. 🎜

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onUnmounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onUnmounted(() => {
      console.log('组件被销毁')
    })

    return {
      message
    }
  }
}
</script>

🎜위 예에서는 const 키워드를 사용하여 message 변수에서 이 변수의 값은 <code>'Hello, Vue3!'이고 이를 반환한 다음 템플릿에서 {{ message }}를 사용하여 텍스트 콘텐츠를 렌더링합니다. 🎜🎜onBeforeMount()🎜🎜onBeforeMount()수명 주기 후크 기능은 Vue2.x의 beforeMount()와 유사합니다. 컴포넌트가 정지 중입니다. DOM에 로드되기 전의 이벤트는 setup() 함수가 실행된 후에 실행됩니다. 🎜🎜다음은 onBeforeMount()를 사용한 예입니다. 🎜rrreee🎜위 예에서는 컴포넌트 템플릿이 마운트되기 전에 onBeforeMount() 함수가 실행됩니다. 콘솔은 구성요소 마운트 전에 실행됨을 출력합니다. 🎜🎜마운팅 단계🎜🎜마운트 단계에서 Vue3는 onMounted() 및 onBeforeUpdate()라는 두 가지 수명 주기 후크 기능을 제공합니다. 🎜🎜onMounted()🎜🎜onMounted()는 Vue2.x의 mounted()와 유사하며 구성 요소가 마운트되어 있음을 나타냅니다. DOM 이벤트의 경우 setup() 함수가 실행된 후에 실행됩니다. 🎜🎜다음은 onMounted()를 사용한 예입니다. 🎜rrreee🎜위 예에서는 ref 함수를 사용하여 메시지를 생성했습니다. > 변수를 사용하고 템플릿에서 {{ message }}를 사용하여 텍스트를 렌더링한 다음 onMounted() 함수를 사용하여 구성 요소가 마운트된 것을 출력합니다. DOM의 에 대한 참조 및 구성 요소의 div 요소에 대한 참조입니다. 🎜🎜onBeforeUpdate()🎜🎜onBeforeUpdate()는 구성 요소가 실행되기 전의 이벤트를 나타내는 Vue2.x의 beforeUpdate()와 유사합니다. 업데이트됨 구성 요소의 상태가 변경된 후 뷰가 다시 렌더링되기 전에 실행됩니다. 🎜🎜다음은 onBeforeUpdate()를 사용한 예입니다. 🎜rrreee🎜위 예에서는 ref 함수를 사용하여 메시지를 생성했습니다. > 변수를 사용하고 템플릿에서 {{ message }}를 사용하여 텍스트를 렌더링한 다음 onBeforeUpdate() 함수를 사용하여 현재 메시지의 값을 구성 요소가 업데이트되었습니다. 🎜🎜업데이트 단계🎜🎜업데이트 단계에서 Vue3는 onUpdated() 및 onDeactivated()라는 두 가지 수명 주기 후크 함수를 제공합니다. 🎜🎜onUpdated()🎜🎜onUpdated()는 Vue2.x의 updated()와 유사합니다. 이는 구성 요소가 실행된 후의 이벤트를 나타냅니다. 업데이트됩니다. 구성 요소의 상태가 변경되고 뷰가 다시 렌더링된 후에 실행됩니다. 🎜🎜다음은 onUpdated()를 사용한 예입니다. 🎜rrreee🎜위 예에서는 ref 함수를 사용하여 메시지를 생성했습니다. > 변수를 사용하고 템플릿에서 {{ message }}를 사용하여 텍스트를 렌더링한 다음 onUpdated() 함수를 사용하여 현재 메시지의 값을 출력합니다. 구성 요소가 업데이트되었습니다. 🎜🎜onDeactivated()🎜🎜onDeactivated()는 Vue2.x의 deactivated()와 유사하며 구성 요소가 활성화된 후 이벤트를 나타냅니다. . 구성 요소가 활성 상태에서 비활성 상태로 전환될 때 실행됩니다. 🎜🎜다음은 onDeactivated()를 사용한 예입니다. 🎜rrreee🎜위 예에서는 ref 함수를 사용하여 메시지를 생성했습니다. > 변수를 사용하고 템플릿에서 {{ message }}를 사용하여 텍스트를 렌더링한 다음 onDeactivated() 함수를 사용하여 활성화된 구성 요소를 출력합니다. > 구성요소가 활성화된 경우>. 🎜🎜파괴 단계🎜🎜파괴 단계에서 Vue3는 수명 주기 후크 기능인 onUnmounted()를 제공합니다. 🎜🎜onUnmounted()🎜

onUnmounted()与Vue2.x中的beforeDestroy()类似，表示组件销毁的事件，它会在组件被销毁之前执行。

下面是一个使用onUnmounted()的例子：

<template>
  <div>{{ message }}</div>
</template>

<script>
import { onUnmounted, ref } from 'vue'

export default {
  setup() {
    const message = ref('Hello, Vue3!')

    onUnmounted(() => {
      console.log('组件被销毁')
    })

    return {
      message
    }
  }
}
</script>

上面的例子中，我们使用ref函数创建了一个message变量，并在模板中使用{{ message }}渲染出文本，然后使用onUnmounted()函数，在组件被销毁时输出 组件被销毁。

总结

本文介绍了Vue3中的生命周期钩子函数，它们包括创建阶段的setup()和onBeforeMount()，挂载阶段的onMounted()和onBeforeUpdate()，更新阶段的onUpdated()和onDeactivated()，以及销毁阶段的onUnmounted()。掌握这些生命周期钩子函数，可以帮助我们更好地理解Vue3组件的生命周期，并且在开发Vue3应用时更加得心应手。

위 내용은 Vue3의 라이프사이클 후크 기능에 대한 자세한 설명: Vue3 라이프사이클 적용에 대한 포괄적인 숙달의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!