Peranan onmounted dalam vue

onMounted ialah cangkuk kitaran hayat pemasangan komponen dalam Vue Fungsinya adalah untuk melaksanakan operasi pemulaan selepas komponen dipasang pada DOM, seperti mendapatkan rujukan kepada elemen DOM, menetapkan data, menghantar permintaan HTTP, mendaftarkan pendengar acara, dsb. Ia hanya dipanggil sekali apabila komponen dipasang Jika anda perlu melakukan operasi selepas komponen dikemas kini atau sebelum ia dimusnahkan, anda boleh menggunakan cangkuk kitar hayat yang lain.

Peranan onMounted dalam Vue

onMounted ialah salah satu cangkuk kitaran hayat Vue, yang bermaksud ia dipanggil selepas komponen dipasang pada DOM. Fungsi utamanya ialah:

Lakukan operasi yang berkaitan dengan pemasangan komponen

Selepas komponen dipasang pada DOM, anda boleh melakukan beberapa operasi permulaan, seperti:

• Dapatkan rujukan elemen DOM
• atau atribut
• Hantar permintaan HTTP
• Daftar pendengar acara

Permintaan data lengkap atau operasi tak segerak

Jika anda perlu mendapatkan data atau melakukan operasi yang mengambil masa selepas komponen dipasang, anda boleh melakukannya dalam onMo cangkuk. Ini memastikan bahawa apabila data atau operasi selesai, komponen bertindak balas dengan sewajarnya.

Contohnya:

<script>
import { onMounted } from 'vue'

export default {
  onMounted() {
    // 获取 DOM 元素的引用
    const el = this.$refs.myElement

    // 设置数据
    this.data = 'Hello world!'

    // 发送 HTTP 请求
    fetch('https://example.com/api/data').then((response) => {
      this.data = response.data
    })

    // 注册事件监听器
    window.addEventListener('resize', this.onResize)
  },
  methods: {
    onResize() {
      // 窗口大小改变时响应
    }
  }
}
</script>

Nota:

• onMounted hook hanya dipanggil sekali apabila komponen dipasang.
• Jika anda perlu melakukan operasi selepas komponen dikemas kini, anda boleh menggunakan cangkuk onUpdated.
• Jika anda perlu melakukan operasi pembersihan sebelum komponen dimusnahkan, anda boleh menggunakan cangkuk onBeforeUnmount.

Atas ialah kandungan terperinci Peranan onmounted dalam vue. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!