vue3 如何使用 mounted

news2024/12/25 7:21:01

vue3 如何使用 mounted
在 Vue 3 中，mounted 生命周期钩子用于当组件被挂载到 DOM 中后执行一些操作。

这个钩子非常适合用来执行那些依赖于 DOM 的初始化工作，比如获取元素的尺寸或者是与第三方的 DOM 有关的库进行交互等。

下面是一个简单的 Vue 3 组件示例，展示了如何使用 mounted 钩子：

import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)

    // 在组件挂载完成后执行
    onMounted(() => {
      console.log('Component is now mounted and ready')
      
      // 这里可以执行任何需要在挂载完成后做的事情
      // 比如访问真实的 DOM 元素
      const el = document.querySelector('#my-element')
      console.log(el)
      
      // 或者启动一个轮询定时器
      const interval = setInterval(() => {
        count.value++
      }, 1000)

      // 清理函数，在组件卸载前清除定时器
      return () => {
        clearInterval(interval)
      }
    })

    return { count }
  }
}

在这个例子中，onMounted 接受一个函数作为参数，该函数会在组件挂载到 DOM 后立即执行。

这里也展示了如何在 onMounted 回调中返回一个清理函数，它会在组件卸载时被调用，这对于清除副作用（如定时器）非常有用。

注意，Vue 3 使用了 Composition API，因此传统的选项式写法中的生命周期钩子（如 mounted）已经被 setup() 函数中的 onMounted() 函数所替代。

如果你是从 Vue 2 升级到 Vue 3，这可能是需要注意的一个变化。

vue3 mounted 的触发时机

在 Vue 3 中，mounted 生命周期钩子的触发时机是在组件实例被挂载到 DOM 后。

具体来说，这意味着以下几点：

实例创建完成：Vue 实例已经完成了数据观测（data observer）、属性和方法的运算，以及指令配置。此时，数据模型已经可以正常工作，但尚未开始第一次 DOM 渲染。
DOM 挂载完成：Vue 实例已经完成了模板编译和渲染，并且组件已经被插入到父容器节点中，DOM 已经被更新以反映组件的初始状态。
$el 属性可用：组件的 $e l 属性已经被创建并且可以访问，这意味着你可以在这个阶段通过 t hi s .$ el 访问到挂载后的 DOM 节点。
ref 属性可用：所有注册过的 ref 属性都已经解析，并且可以通过 this.$refs 访问到它们引用的 DOM 元素或子组件实例。

简而言之，mounted 钩子是当你需要在组件挂载后执行一些操作时使用的理想位置，比如：

操作 DOM：由于组件已经挂载到了 DOM 中，你现在可以安全地查询或操作 DOM。
初始化第三方插件：很多第三方插件或库需要一个已经存在的 DOM 节点来初始化，mounted 是一个合适的时间点。
发送网络请求：如果需要在组件加载时获取数据，可以在 mounted 钩子中发起网络请求。
设置定时器：如果需要在组件挂载后定期执行某些操作，可以在 mounted 钩子中设置定时器。


 
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const message = ref('Hello, Vue 3!');

    onMounted(() => {
      console.log('Component has been mounted!');
      // 在这里可以安全地操作 DOM
      const element = document.getElementById('app');
      console.log(element); // 输出挂载后的 DOM 节点

      // 发送网络请求
      fetch('https://api.example.com/data')
        .then(response => response.json())
        .then(data => {
          console.log('Fetched data:', data);
          message.value = data.message; // 更新组件的状态
        })
        .catch(error => {
          console.error('Error fetching data:', error);
        });
    });

    return { message };
  }
};