vue3 如何使用 mounted

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

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

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

javascript 复制代码
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,这可能是需要注意的一个变化。

  1. vue3 mounted 的触发时机

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

具体来说,这意味着以下几点:

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

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

  • 操作 DOM:由于组件已经挂载到了 DOM 中,你现在可以安全地查询或操作 DOM。
  • 初始化第三方插件:很多第三方插件或库需要一个已经存在的 DOM 节点来初始化,mounted 是一个合适的时间点。
  • 发送网络请求:如果需要在组件加载时获取数据,可以在 mounted 钩子中发起网络请求。
  • 设置定时器:如果需要在组件挂载后定期执行某些操作,可以在 mounted 钩子中设置定时器。
javascript 复制代码
 
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 };
  }
};

在这个示例中,当组件挂载到 DOM 后,控制台会打印一条消息,表示组件已经挂载。

此外,还会发起一个网络请求来获取数据,并更新组件的状态。这些都是在 mounted 钩子中常见的操作。

相关推荐
闯闯桑13 分钟前
toDF(columns: _*) 语法
开发语言·前端·spark·scala·apache
xrkhy17 分钟前
ElementUI之Upload 上传的使用
前端·elementui
IT_陈寒37 分钟前
Vite5.0性能翻倍秘籍:7个极致优化技巧让你的开发体验飞起来!
前端·人工智能·后端
xw51 小时前
uni-app项目Tabbar实现切换icon动效
前端·uni-app
凉、介1 小时前
U-Boot 多 CPU 执行状态引导
java·服务器·前端
时光少年1 小时前
Android 喷雾效果实现
android·前端
南囝coding1 小时前
Claude 封禁中国?为啥我觉得是个好消息
前端·后端
wordbaby1 小时前
备忘录模式(Memento Pattern)详解
前端
小鱼儿亮亮2 小时前
二、React基础精讲:编写TodoList、事件绑定、JSX语法、组件之间传值
前端·react.js
Mintopia2 小时前
实时 AIGC:Web 端低延迟生成的技术难点与突破
前端·javascript·aigc