当前位置：首页 > 编程知识 > 正文

Vue3 onMounted: 深入探讨

一、介绍

Vue3 onMounted是Vue3中新增的一个生命周期函数。它类似于Vue2中的mounted钩子函数，但是有些不同，我们将在下面的文章中进行详细介绍。

二、使用Vue3 onMounted

使用Vue3 onMounted非常简单。只需要导入onMounted函数，然后将它作为setup函数中的一个属性即可：

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

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

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!')
    })

    return {
      message: 'Hello World!'
    }
  }
}
</script>

三、Vue3 onMounted与Vue2 mounted函数的区别

Vue3 onMounted与Vue2 mounted函数非常相似，但也有一些区别。首先，Vue3 onMounted是放在setup函数中的，而不是Vue2 mounted函数中。其次，Vue3 onMounted的代码执行时间比Vue2 mounted函数要早。Vue3 onMounted会在template中的内容被挂载之前执行，而Vue2 mounted会在template中的内容被完全解析和挂载之后再执行。

因此，如果我们要访问DOM元素或者计算某个组件的尺寸，我们需要在Vue3 onMounted中使用ref或者watchEffect等相关API。下面是一个例子：

<template>
  <div v-if="show">Hello World!</div>
</template>

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

export default {
  setup() {
    const show = ref(false)

    onMounted(() => {
      console.log('Component is mounted!')

      // 让show值为true，以便在DOM中显示元素
      show.value = true
    })

    return {
      show
    }
  }
}
</script>

四、Vue3 onMounted的用途

1. 做一些初始化操作

Vue3 onMounted可以被用于一些需要在组件挂载后才能执行的初始化操作，例如从服务器获取数据、初始化Websocket连接等等。下面是一个简单的例子：

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

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

export default {
  setup() {
    const message = ref('')

    onMounted(async () => {
      const res = await fetch('/api/message')
      const data = await res.json()
      message.value = data.message
    })

    return {
      message
    }
  }
}
</script>

2. 监听用户滚动行为

Vue3 onMounted可以被用于监听用户的滚动行为，例如实现“无限滚动”等功能。我们可以在组件挂载后，使用addEventListener监听滚动事件。

<template>
  <div>
    <p v-for="item in items" :key="item">{{ item }}</p>
  </div>
</template>

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

export default {
  setup() {
    const items = ref([1, 2, 3])

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    function handleScroll() {
      // 这里实现"无限滚动"逻辑
      console.log('Scroll position:', window.scrollY)
    }

    return {
      items
    }
  }
}
</script>

3. 使用第三方库

有些第三方JS库需要在DOM元素加载完成后才能被使用，此时可以在Vue3 onMounted中导入这些库，然后进行初始化操作。下面是一个简单的案例，使用Swiper实现轮播图：

<template>
  <div class="swiper-container">
    <div class="swiper-wrapper">
      <div class="swiper-slide">Slide 1</div>
      <div class="swiper-slide">Slide 2</div>
      <div class="swiper-slide">Slide 3</div>
    </div>
  </div>
</template>

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

import Swiper from 'swiper';
import 'swiper/css/swiper.min.css';

export default {
  setup() {
    onMounted(() => {
      new Swiper('.swiper-container', {
        // Swiper配置项
      })
    })
  }
}
</script>

结语

Vue3 onMounted是Vue3中一个非常重要的生命周期函数，它可以帮助我们在组件挂载后执行初始化操作，并且可以用来监听用户滚动行为或者使用第三方库等等。因此，在实际开发中，我们需要熟练掌握它的用法。

初始化

相关文章