Vue3のライフサイクルフック機能を詳しく解説：Vue3ライフサイクルの応用を徹底マスター

Vue3 のライフ サイクル フック機能の詳細な説明: Vue3 ライフ サイクル アプリケーションを完全に習得する

人気の JavaScript フレームワークとして、Vue は常に幅広い注目と愛を受けてきました。 Vue3 のリリースに伴い、そのライフサイクル フック機能にもいくつかの変更と最適化が加えられました。フロントエンド開発者にとって、Vue3 のライフサイクル フック機能を理解することは非常に重要です。この記事では、Vue3におけるライフサイクルフック機能とその応用について詳しく紹介します。

Vue3 のライフサイクル フック機能

Vue3 のライフサイクル フック機能も、作成、マウント、更新、破棄の 4 つの段階に分かれています。以下では、Vue3 におけるこれら 4 つのステージのライフサイクルフック機能とその使用方法を詳しく紹介します。

作成フェーズ

作成フェーズでは、Vue3 は setup() と onBeforeMount() という 2 つのライフサイクル フック関数を提供します。

setup()

setup() は、Vue3 によって導入された新しいライフサイクル フック関数です。これは、Vue3 のコードに含める必要があります。関数、setup() この関数はコンポーネントの初期化時に実行され、その主な目的はコンポーネントのデータとメソッドを設定することです。

setup() 関数の使用法は、Vue2.x の data と methods に似ています。 ) 以下に示すように、コンポーネントが関数内で使用する必要があるデータとメソッドを宣言します。

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

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

上記の例では、

const キーワードを使用してファイルを宣言しました。 message 変数という名前の場合、変数の値は 'Hello, Vue3!' であり、それを返します。テンプレートで {{ message }} を使用して、テキストコンテンツをレンダリングします。

onBeforeMount()

onBeforeMount()ライフサイクル フック関数は、Vue2 の beforeMount() に似ています。 x はコンポーネントが 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() という 2 つのライフサイクル フック関数を提供します。

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() に似ており、コンポーネントは Update before イベントで、コンポーネントの状態が変化した後、ビューの再レンダリングが開始される前に実行されます。

次は、

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() という 2 つのライフサイクル フック関数を提供します。

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()

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 中国語 Web サイトの他の関連記事を参照してください。