Vue3中操作dom的四种方式，建议收藏！！！

一、背景与问题

在Vue3开发中，开发者常常需要在某些特殊场景下直接操作DOM元素。例如：

• 动态生成的第三方组件需要手动设置样式
• 需要实现复杂的动画效果
• 需要获取元素的尺寸信息
• 需要处理浏览器兼容性问题

然而，Vue3的响应式系统和虚拟DOM机制使得直接操作DOM变得复杂。开发者需要理解不同操作方式的原理、适用场景以及潜在风险。

二、基本原理

Vue3采用基于Proxy的响应式系统，与Vue2的Object.defineProperty有本质区别。当开发者直接操作DOM时，会绕开Vue的响应式系统，可能导致以下问题：

1. 响应性破坏：直接修改元素属性可能无法触发视图更新
2. 性能损耗：频繁DOM操作会触发不必要的重排重绘
3. 兼容性问题：不同浏览器对CSS属性的支持存在差异

三、环境准备

npm install vue@next

四、核心实现

方式一：使用ref获取元素引用

<template>
  <div ref="myRef">Hello Vue3</div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const myRef = ref(null)
    
    // 等待DOM渲染完成
    const init = () => {
      if (myRef.value) {
        console.log('元素宽度:', myRef.value.clientWidth)
        myRef.value.style.color = 'red'
      }
    }
    
    return { myRef, init }
  }
}
</script>

关键点解释：

• ref属性会返回一个Proxy对象，通过.value访问原始DOM
• 需要使用nextTick或onMounted确保DOM已渲染
• 直接修改样式属性会破坏响应式系统

方式二：通过$el访问根元素

<template>
  <div id="app">
    <div>Root Element</div>
  </div>
</template>

<script>
export default {
  mounted() {
    // 访问根元素
    console.log('Root element:', this.$el)
    
    // 修改根元素样式
    this.$el.style.backgroundColor = 'lightblue'
  }
}
</script>

关键点解释：

• $el是组件实例的根DOM节点
• 适用于需要访问整个组件树的场景
• 修改$el属性会触发组件更新

方式三：使用模板引用（Template Ref）

<template>
  <div>
    <div ref="myDiv">Template Ref</div>
    <button @click="logDiv">Log Div</button>
  </div>
</template>

<script>
export default {
  setup() {
    const myDiv = ref(null)
    
    const logDiv = () => {
      if (myDiv.value) {
        console.log('Template Ref:', myDiv.value)
        console.log('Element text:', myDiv.value.innerText)
      }
    }
    
    return { myDiv, logDiv }
  }
}
</script>

关键点解释：

• 模板引用需要在setup()中声明
• 支持访问DOM节点的属性和方法
• 适用于需要访问子元素的场景

方式四：自定义指令（Custom Directive）

<template>
  <div v-custom-directive="100">Custom Directive</div>
</template>

<script>
export default {
  directives: {
    'custom-directive': {
      mounted(el, binding) {
        el.style.fontSize = `${binding.value}px`
        el.style.backgroundColor = 'yellow'
      }
    }
  }
}
</script>

关键点解释：

• 自定义指令需要在directives选项中注册
• 支持mounted、updated等生命周期钩子
• 可以封装复用DOM操作逻辑

五、完整案例：动态表单验证

<template>
  <div>
    <input v-model="username" ref="usernameInput" type="text" placeholder="Username">
    <div v-if="errors.username" class="error">{{ errors.username }}</div>
    <button @click="validate">Submit</button>
  </div>
</template>

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

export default {
  setup() {
    const username = ref('')
    const errors = ref({})
    const usernameInput = ref(null)
    
    const validate = () => {
      const value = username.value.trim()
      if (!value) {
        errors.value.username = 'Username is required'
        usernameInput.value.focus()
      } else {
        errors.value.username = ''
      }
    }
    
    onMounted(() => {
      // 等待DOM渲染
      setTimeout(() => {
        if (usernameInput.value) {
          usernameInput.value.style.border = '1px solid #ccc'
        }
      }, 0)
    })
    
    return { username, errors, validate, usernameInput }
  }
}
</script>

<style>
.error {
  color: red;
}
</style>

关键点解释：

• 使用ref获取输入框引用实现聚焦操作
• 在onMounted中进行DOM操作确保渲染完成
• 通过setTimeout延迟执行确保DOM更新
• 混合使用响应式数据和直接DOM操作

六、源码解析

以ref实现为例，Vue3的ref实现原理：

// src/core/directives/ref.ts
export function ref(el: Node, binding: DirectiveBinding) {
  if (binding.arg) {
    const instance = getCurrentInstance()
    if (instance && instance.refs) {
      instance.refs[binding.arg] = el
    }
  }
}

关键点：

• 通过getCurrentInstance获取当前组件实例
• 将DOM节点存储在instance.refs中
• 实现了DOM与组件实例的绑定

七、进阶使用

1. 性能优化技巧

• 使用requestAnimationFrame进行动画操作
• 避免频繁操作DOM，合并多次修改
• 使用v-show代替v-if进行条件渲染

2. 安全实践

• 对用户输入进行转义处理
• 使用textContent代替innerHTML防止XSS攻击
• 对第三方库的DOM操作进行沙箱隔离

3. 跨浏览器兼容处理

// 兼容处理示例
function getScrollTop() {
  return window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
}

八、性能与工程实践

1. 性能优化方案

2. 异常处理

try {
  // DOM操作代码
} catch (error) {
  console.error('DOM操作异常:', error)
  // 恢复状态
}

3. 安全防护

function safeInnerHTML(html) {
  const div = document.createElement('div')
  div.innerHTML = html
  return div.textContent || div.innerText
}

九、常见问题与踩坑

1. 常见错误示例

// 错误示例：未等待DOM渲染
onMounted(() => {
  if (myRef.value) { // 可能为null
    myRef.value.style.display = 'none'
  }
})

解决方法：

onMounted(() => {
  nextTick(() => {
    if (myRef.value) {
      myRef.value.style.display = 'none'
    }
  })
})

2. 安全风险案例

// 错误示例：直接使用用户输入
const userInput = '"><script>alert(1)</script>'
document.getElementById('target').innerHTML = userInput

解决方法：

// 使用textContent
document.getElementById('target').textContent = userInput

3. 性能陷阱

// 错误示例：频繁操作DOM
watch(() => username.value, (newVal) => {
  document.getElementById('target').innerText = newVal
})

解决方法：

// 使用计算属性批量更新
computed(() => {
  return {
    displayText: username.value
  }
})

十、最佳实践

十一、总结

在Vue3开发中，操作DOM需要权衡响应式系统与直接操作的利弊。四种主要方式各有适用场景：

1. ref：适合简单DOM访问，但可能破坏响应性
2. $el：适用于根元素操作，但功能有限
3. 模板引用：支持复杂子元素操作，但需注意作用域
4. 自定义指令：最佳复用方案，但需要合理封装

开发者应优先考虑Vue的响应式机制，只有在特殊场景才需要直接操作DOM。在实际项目中，建议：

• 对于UI交互，优先使用Vue的响应式系统
• 对于复杂动画，使用CSS3和requestAnimationFrame
• 对于表单验证，结合模板引用和响应式数据
• 对于第三方库集成，使用沙箱环境

正确使用DOM操作技术，可以提升开发效率，同时避免潜在的安全风险和性能问题。