Vue3迁移实战：告别this，在onMounted里如何优雅地操作DOM和发起请求？

Vue3迁移实战：告别this，在onMounted里如何优雅地操作DOM和发起请求？

从Vue2到Vue3的升级过程中，最让开发者感到不适应的可能就是this上下文的消失。特别是在onMounted生命周期钩子中，原本依赖this的各种操作都需要重新思考实现方式。本文将深入探讨在Vue3的Composition API环境下，如何在不使用this的情况下，依然能够优雅地完成DOM操作和异步请求。

1. Vue2到Vue3的生命周期变化

Vue2中的mounted钩子与Vue3中的onMounted在功能上相似，但在使用方式上却有着本质区别。理解这些差异是顺利迁移的关键。

Vue2的mounted特点：

• 自动绑定this指向组件实例
• 可以直接访问this.$el、this.$refs
• 能够通过this访问所有组件选项（data、methods等）
• 子组件的mounted会在父组件之后调用

Vue3的onMounted革新：

• 需要显式从'vue'导入
• 在setup函数或<script setup>中使用
• 没有this绑定，需要通过其他方式访问组件实例
• 执行时机与Vue2基本一致，都是在DOM挂载完成后

// Vue2方式 export default { mounted() { console.log(this.$el) // 直接访问DOM根元素 this.fetchData() // 直接调用methods中的方法 } } // Vue3方式 import { onMounted } from 'vue' export default { setup() { onMounted(() => { // 这里没有this! }) } }

2. 替代this.$el的几种优雅方案

在Vue3中，我们有多种方式可以替代Vue2中通过this.$el访问DOM元素的做法。

2.1 使用模板ref

这是最推荐的方式，它更符合Vue的响应式理念：

<template> <div ref="rootElement">内容</div> </template> <script setup> import { ref, onMounted } from 'vue' const rootElement = ref(null) onMounted(() => { console.log(rootElement.value) // 相当于Vue2的this.$el }) </script>

2.2 使用getCurrentInstance（谨慎使用）

虽然不推荐，但在某些复杂场景下可能需要：

import { getCurrentInstance, onMounted } from 'vue' onMounted(() => { const instance = getCurrentInstance() console.log(instance.ctx.$el) })

注意：getCurrentInstance主要作为应急方案，过度使用会导致代码难以维护。

2.3 对比表格：Vue2与Vue3的DOM访问方式

3. 在onMounted中发起请求的最佳实践

Vue3的Composition API为异步操作提供了更灵活的组织方式。

3.1 基本请求模式

import { ref, onMounted } from 'vue' import axios from 'axios' export default { setup() { const userData = ref(null) const loading = ref(false) const error = ref(null) const fetchData = async () => { loading.value = true try { const response = await axios.get('/api/user') userData.value = response.data } catch (err) { error.value = err } finally { loading.value = false } } onMounted(fetchData) return { userData, loading, error } } }

3.2 使用Composable封装请求逻辑

更高级的做法是将请求逻辑提取为可复用的composable：

// useFetch.js import { ref } from 'vue' export function useFetch(url) { const data = ref(null) const loading = ref(false) const error = ref(null) const execute = async () => { loading.value = true try { const response = await fetch(url) data.value = await response.json() } catch (err) { error.value = err } finally { loading.value = false } } return { data, loading, error, execute } } // 组件中使用 import { useFetch } from './useFetch' const { data, loading, error } = useFetch('/api/data')

4. 常见场景的迁移方案

4.1 替代this.$watch

Vue3中使用独立的watch函数：

import { watch, ref, onMounted } from 'vue' export default { setup() { const count = ref(0) // 替代this.$watch watch(count, (newVal, oldVal) => { console.log(`count changed from ${oldVal} to ${newVal}`) }) onMounted(() => { // 模拟数据变化 setInterval(() => { count.value++ }, 1000) }) } }

4.2 替代this.$nextTick

Vue3中直接导入nextTick函数：

import { nextTick } from 'vue' onMounted(async () => { await nextTick() // DOM更新完成后执行的代码 })

4.3 清理副作用

Vue3中提供了更清晰的副作用清理方式：

onMounted(() => { const timer = setInterval(() => { console.log('Running...') }, 1000) // 清理函数 return () => { clearInterval(timer) } })

5.<script setup>语法糖下的特殊考量

<script setup>是Vue3的单文件组件编译时语法糖，它让Composition API的使用更加简洁。

5.1 基本用法

<script setup> import { ref, onMounted } from 'vue' const count = ref(0) onMounted(() => { console.log('Component mounted!') }) </script>

5.2 访问组件实例

在<script setup>中，组件的上下文是封闭的，但可以通过特殊方式暴露：

<script setup> import { ref } from 'vue' const internalState = ref('private') // 暴露给父组件 defineExpose({ publicMethod() { console.log('This is a public method') } }) </script>

5.3 执行时机差异

在<script setup>中，onMounted的执行时机有细微差别：

1. 组件实例已创建
2. props已解析
3. 响应式系统已建立
4. 但DOM尚未渲染完成

如果需要确保DOM已渲染，可以结合nextTick使用：

onMounted(async () => { await nextTick() // 此时可以安全操作DOM })

6. 实战技巧与常见陷阱

在实际项目中迁移到Vue3的onMounted时，有几个关键点需要注意：

推荐做法：

• 将DOM操作封装在自定义指令中
• 使用ref而非直接查询DOM
• 将复杂逻辑提取到composable函数
• 善用TypeScript增强类型安全

需要避免的陷阱：

• 在onMounted中直接修改响应式数据可能导致无限循环
• 忘记清理事件监听器和定时器
• 过度依赖getCurrentInstance
• 在SSR环境中使用浏览器专有API

// 良好的实践示例 onMounted(() => { const handleResize = () => { // 响应式更新 } window.addEventListener('resize', handleResize) return () => { window.removeEventListener('resize', handleResize) } })

迁移到Vue3的Composition API确实需要改变一些习惯，但一旦适应，你会发现代码组织更加灵活，逻辑复用更加方便。特别是在处理onMounted这类生命周期钩子时，虽然失去了this的便利，但获得了更明确的依赖关系和更清晰的代码结构。