uniapp mounted生命周期如何使用

在uniapp中，mounted生命周期钩子具体该怎么使用？我在页面加载时尝试在这个钩子里获取DOM节点，但有时候获取不到，是什么原因？另外，mounted在组件和页面中的使用有什么区别？求详细的使用示例和注意事项。

2 回复

在uniapp中，mounted是页面生命周期钩子，在页面加载完成时触发。用法：

export default {
  mounted() {
    // 在这里写初始化逻辑
    console.log('页面加载完成')
    this.getData()
  }
}

常用于数据请求、DOM操作等初始化任务。


在 UniApp 中，mounted 是 Vue.js 生命周期钩子之一，用于在页面或组件挂载到 DOM 后执行操作。它常用于初始化数据、调用接口或操作 DOM 元素。

使用方法：

  1. 在页面中使用：在页面的 Vue 实例中定义 mounted 函数。
  2. 在组件中使用：在自定义组件的选项中定义 mounted 函数。

示例代码：

在页面中使用：

export default {
  data() {
    return {
      message: 'Hello UniApp'
    }
  },
  mounted() {
    console.log('页面已挂载，可以在这里执行初始化操作');
    this.fetchData(); // 调用接口获取数据
  },
  methods: {
    fetchData() {
      // 模拟数据请求
      setTimeout(() => {
        this.message = '数据加载完成';
      }, 1000);
    }
  }
}

在组件中使用：

export default {
  data() {
    return {
      count: 0
    }
  },
  mounted() {
    console.log('组件已挂载');
    this.count = 10; // 初始化数据
  }
}

注意事项：

  • mounted 在页面或组件首次渲染完成后触发，确保 DOM 已准备就绪。
  • 适用于需要操作 DOM 或初始化数据的场景，但避免在此执行耗时操作，以免影响页面加载性能。
  • 在 UniApp 中，页面和组件的生命周期与 Vue.js 一致，但部分原生功能（如小程序）可能需要使用 onReady 等特定钩子。

如果涉及跨平台兼容性，请参考 UniApp 官方文档。

回到顶部