Penjelasan terperinci tentang fungsi cangkuk kitaran hayat dalam Vue3: Penguasaan menyeluruh aplikasi kitaran hayat Vue3

Penjelasan terperinci tentang fungsi cangkuk kitaran hayat dalam Vue3: Penguasaan menyeluruh aplikasi kitaran hayat Vue3

Vue, sebagai rangka kerja JavaScript yang popular, sentiasa mendapat perhatian dan kasih sayang yang meluas. Dengan keluaran Vue3, fungsi cangkuk kitaran hayatnya juga telah mengalami beberapa perubahan dan pengoptimuman. Memahami fungsi cangkuk kitaran hayat Vue3 adalah sangat penting untuk pembangun bahagian hadapan. Artikel ini akan memperkenalkan secara terperinci fungsi cangkuk kitaran hayat dan aplikasinya dalam Vue3.

Fungsi cangkuk kitaran hayat dalam Vue3

Fungsi cangkuk kitaran hayat dalam Vue3 juga dibahagikan kepada empat peringkat: penciptaan, pemasangan, kemas kini dan pemusnahan. Di bawah ini kami akan memperkenalkan secara terperinci fungsi cangkuk kitaran hayat bagi empat peringkat ini dalam Vue3 dan cara menggunakannya.

Fasa penciptaan

Dalam fasa penciptaan, Vue3 menyediakan dua fungsi cangkuk kitaran hayat: setup() dan onBeforeMount().

setup()

setup() ialah fungsi cangkuk kitaran hayat baharu yang diperkenalkan oleh Vue3 Fungsi ini mesti disertakan dalam kod dalam Vue3 komponen dimulakan Pelaksanaan, tujuan utamanya adalah untuk menetapkan data dan kaedah komponen, dsb. Penggunaan fungsi setup()

adalah serupa dengan setup() dan data dalam Vue2.x Kami boleh mengisytiharkan data dan kaedah yang perlu digunakan oleh komponen dalam fungsi methods, sebagai ditunjukkan di bawah: setup()

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

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

Dalam contoh di atas, kami menggunakan kata kunci

untuk mengisytiharkan pembolehubah bernama const, nilai pembolehubah ialah message, dan kemudian mengembalikannya, menggunakan Anda boleh memaparkan kandungan teks. 'Hello, Vue3!'{{ message }}

onBeforeMount()

Fungsi cangkuk kitaran hayat adalah serupa dengan

dalam Vue2 Dilaksanakan selepas fungsi itu dilaksanakan. onBeforeMount()beforeMount()Berikut ialah contoh penggunaan setup():

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

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

Dalam contoh di atas, fungsi onBeforeMount() akan dilaksanakan sebelum templat komponen dipasang pada DOM dan

akan dikeluarkan pada konsol.

onBeforeMount()Fasa pelekap组件挂载前执行

Dalam fasa pelekap, Vue3 menyediakan dua fungsi cangkuk kitaran hayat:

dan

.

onMounted()onBeforeUpdate()

onMounted() serupa dengan

dalam Vue2.x, menunjukkan peristiwa selepas komponen dipasang pada DOM Ia akan dilaksanakan selepas

fungsi dilaksanakan. onMounted()mounted()Berikut ialah contoh penggunaan setup():

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

Dalam contoh di atas, kami menggunakan fungsi onMounted() untuk mencipta pembolehubah

dan menggunakan

dalam templat Paparkan teks, dan kemudian gunakan fungsi ref untuk mengeluarkan message selepas komponen dipasang, serta rujukan kepada elemen {{ message }} dalam komponen. onMounted()组件已经挂载到DOM上div

onBeforeUpdate() serupa dengan

dalam Vue2 Dilaksanakan sebelum rendering.

onBeforeUpdate()Berikut ialah contoh penggunaan beforeUpdate():

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

Dalam contoh di atas, kami menggunakan fungsi onBeforeUpdate() untuk mencipta pembolehubah

dan menggunakan

dalam templat Paparkan teks, dan kemudian gunakan fungsi ref untuk mengeluarkan nilai mesej semasa sebelum komponen dikemas kini. message{{ message }}Fasa kemas kinionBeforeUpdate()

Dalam fasa kemas kini, Vue3 menyediakan dua fungsi cangkuk kitaran hayat:

dan

.

onUpdated()onDeactivated()

onUpdated() adalah serupa dengan

dalam Vue2.x Ia mewakili acara selepas komponen dikemas kini. Ia akan memaparkan semula paparan selepas keadaan komponen berubah kemudian laksana.

onUpdated()Berikut ialah contoh penggunaan updated():

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

Dalam contoh di atas, kami menggunakan fungsi onUpdated() untuk mencipta pembolehubah

dan menggunakan

dalam templat Paparkan teks, dan kemudian gunakan fungsi ref untuk mengeluarkan nilai mesej semasa selepas komponen dikemas kini. message{{ message }}onUpdated()

onDeactivated() serupa dengan

dalam Vue2 implement.

onDeactivated()Berikut ialah contoh penggunaan deactivated():

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

Dalam contoh di atas, kami menggunakan fungsi onDeactivated() untuk mencipta pembolehubah

dan menggunakan

dalam templat Paparkan teks, kemudian gunakan fungsi ref untuk mengeluarkan message apabila komponen diaktifkan. {{ message }}onDeactivated()Fasa Pemusnahan组件被激活

Dalam fasa pemusnahan, Vue3 menyediakan fungsi cangkuk kitaran hayat:

.

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应用时更加得心应手。

Atas ialah kandungan terperinci Penjelasan terperinci tentang fungsi cangkuk kitaran hayat dalam Vue3: Penguasaan menyeluruh aplikasi kitaran hayat Vue3. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!