vue2的Mounted和vue3的onMounted，这两个钩子有何不同？

时间：2025-04-06 14:38:52

vue2的Mounted和vue3的onMounted，这两个钩子有何不同？

  • vue2的Mount
  • vue3的onMounted
  • 两个钩子的区别
  • `
  • vue3的`

vue2的Mount

mounted 是 Vue 2 中的一个生命周期钩子函数，它在组件挂载到 DOM 上之后被调用，常用于执行一些 DOM 操作或者发送网络请求等。

下面是关于 mounted 钩子的一些细节：

  • mounted 钩子是在组件实例被挂载到 DOM 上之后才被调用的，因此在该钩子中可以访问到组件的 DOM 元素。

  • mounted 钩子中的 this 指向的是组件实例本身，因此可以通过 this 访问组件的数据和方法。

  • mounted 钩子在组件的子组件被挂载之前被调用，因此如果需要在子组件中访问到父组件的数据，可以在 mounted 钩子中使用$nextTick 方法。

  • mounted 钩子只会被调用一次，因此如果需要在组件被重新渲染时执行一些操作，可以使用 watch 监听数据变化或者使用计算属性。

  • 如果在 mounted 钩子中进行了一些异步操作，需要注意在组件销毁时取消这些操作，以避免内存泄漏。

下面是一个使用 mounted 钩子的小例子：

export default {
  mounted() {
    // 访问组件的 DOM 元素
    console.log(this.$el)

    // 发送网络请求
    axios.get('/api/data').then(response => {
      this.data = response.data
    })

    // 使用 $nextTick 方法访问父组件的数据
    this.$nextTick(() => {
      console.log(this.$parent.data)
    })

    // 监听数据变化
    this.$watch('data', () => {
      console.log('data changed')
    })

    // 在组件销毁时取消异步操作
    this.$once('hook:beforeDestroy', () => {
      this.cancelAsyncTask()
    })
  }
}

上面的代码，我们在 mounted 钩子中访问了组件的 DOM 元素、发送了网络请求、使用 $nextTick 方法访问了父组件的数据、监听了数据变化，并在组件销毁时取消了异步操作。

vue3的onMounted

在 Vue 3 中，mounted 钩子被重命名为 onMounted，它仍然是一个生命周期钩子函数，用于在组件挂载到 DOM 上之后执行一些操作。

下面是关于 onMounted 钩子的一些细节：

  • onMounted 钩子是通过 setup函数来使用的，它必须在组件实例创建之前调用，并返回一个对象，该对象包含组件实例中需要使用的数据、方法和生命周期钩子等。

  • onMounted 钩子中的函数会在组件挂载到 DOM 上之后执行，与 Vue 2 的 mounted 钩子相同，因此在该钩子中可以访问到组件的 DOM 元素。

  • 在 setup 函数中，我们可以使用 ref 函数来创建一个响应式的变量，并将其初始化为 null，然后在 onMounted钩子中将其赋值为组件的 DOM 元素，从而访问到组件的 DOM 元素。

  • 与 Vue 2 的 mounted 钩子不同，Vue 3 的 onMounted 钩子中的函数没有 this上下文，因此无法直接访问组件实例中的数据和方法。如果需要访问组件实例中的数据和方法，可以使用
    getCurrentInstance 函数获取当前组件实例，并通过 ctx 参数来访问组件实例中的数据和方法。

  • onMounted 钩子只会被调用一次，因此如果需要在组件被重新渲染时执行一些操作，可以使用 watch 监听数据变化或者使用计算属性。

  • 如果在 onMounted 钩子中进行了一些异步操作，需要注意在组件销毁时取消这些操作，以避免内存泄漏。

下面是一个使用 onMounted 钩子的小例子：

import { ref, onMounted, getCurrentInstance } from 'vue'

export default {
  setup() {
    const element = ref(null)
    const { ctx } = getCurrentInstance()

    onMounted(() => {
      // 访问组件的 DOM 元素
      element.value = ctx.$el

      // 发送网络请求
      axios.get('/api/data').then(response => {
        ctx.data = response.data
      })

      // 监听数据变化
      ctx.$watch('data', () => {
        console.log('data changed')
      })

      // 在组件销毁时取消异步操作
      ctx.$once('hook:beforeUnmount', () => {
        cancelAsyncTask()
      })
    })

    return { element }
  }
}

两个钩子的区别

  1. Vue 2 的 mounted 和 Vue 3 的 onMounted 都是生命周期钩子函数，它们的作用都是在组件挂载到 DOM上之后执行一些操作。它们的主要区别在于使用方式和参数传递上。

  2. 在 Vue 2 中，mounted 钩子是在组件实例被挂载到 DOM 上之后立即调用的，它没有任何参数传递。我们可以在 mounted钩子中访问到组件的 DOM 元素，进行一些 DOM 操作或者发送网络请求等。

  3. 在 Vue 3 中，onMounted 钩子是通过 setup 函数来使用的。setup函数是在组件实例创建之前调用的，它必须返回一个对象，该对象包含组件实例中需要使用的数据、方法和生命周期钩子等。在 setup函数中，我们可以通过 onMounted 函数来注册 mounted 钩子。onMounted函数接受一个函数作为参数，该函数会在组件挂载到 DOM 上之后执行。与 Vue 2 的 mounted 钩子不同，onMounted钩子中的函数会接收到一个 ref 对象作为参数，该对象指向组件的 DOM 元素。

再以vue3的onMounted举个例子：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const element = ref(null)

    onMounted(() => {
      console.log(element.value) // 访问组件的 DOM 元素
    })

    return { element }
  }
}

在上面的代码中，我们首先使用 ref 函数创建了一个 element 变量，并将其初始化为 null。然后，我们使用 onMounted 函数来注册 mounted 钩子，该钩子会在组件挂载到 DOM 上之后执行。在 onMounted 函数中，我们访问了 ，这样就可以访问到组件的 DOM 元素了。最后，我们通过 return 语句将 element 变量暴露给组件实例使用。

<script setup> 中，onMounted的执行时机

⭐⭐⭐⭐⭐在 <script setup> 中使用 onMounted 时，它的执行时机是在组件实例创建后，模板渲染完成前。这意味着在 onMounted 中可以访问组件的 props、data 和 computed 等属性，但是不能访问模板中的 DOM 元素，因为它们还没有被渲染出来。

具体来说，<script setup> 中的代码会在以下情况下执行：

组件实例创建时，即 beforeCreate 和 created 生命周期之间；
组件的 props 和 data 初始化完成后；
组件的 template 编译成渲染函数之前。

因此，如果在 onMounted 中需要访问 DOM 元素，可以使用 nextTick 或 watchEffect 等方法来等待模板渲染完成后再执行相关操作。

vue3的<script setup> 中，onMounted的用法

⭐⭐⭐在 <script setup> 中，可以使用 defineExpose 函数来将组件内部的变量和函数暴露给组件的父组件。同时，我们可以使用 onMounted 函数来注册 mounted 钩子，该钩子会在组件挂载到 DOM 上之后执行。
小例子看一下：

<template>
  <div>{{ count }}</div>
</template>

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

const count = ref(0)

onMounted(() => {
  console.log('张三')
})

defineExpose({
  count
})
</script>

在上面的代码中，我们使用 <script setup> 定义了一个组件，其中包含一个 count 变量和一个 onMounted 钩子。在 onMounted 钩子中，我们打印了张三。同时，我们使用 defineExpose 函数将 count 变量暴露给组件的父组件。在模板中，我们使用 {{ count }} 来显示 count 变量的值。

使用 <script setup> 和 onMounted 可以让我们更加方便地注册 mounted 钩子，并将组件内部的变量和函数暴露给组件的父组件，从而使得组件更加易于理解和维护。

小结：在onMounted中通常做以下事情：

发送网络请求，获取数据并更新组件的状态；
注册事件监听器，比如监听鼠标点击、滚动等事件；
初始化第三方库，比如图表库、地图库等；
执行一些需要在组件挂载后才能执行的操作，比如获取元素的尺寸、位置等。

需要注意的是，onMounted 中不应该包含会导致 DOM 重渲染的操作，比如修改组件的 props 或 data，因为这些操作会触发组件重新渲染，从而导致死循环或其他异常情况。如果需要修改组件的状态，应该在 setup 函数中使用 reactive 或 ref 来定义响应式数据，并在 template 中使用它们来渲染视图。

相关文章