震惊！90%前端工程师都踩过的坑！Vue中`$el`和`$refs`获取DOM元素的10大区别与实战指南

引言

在如今竞争激烈的前端开发领域，Vue作为最热门的JavaScript框架之一，以其高效的开发模式和丰富的生态系统，深受广大前端工程师的喜爱。然而，在使用Vue进行开发时，如何正确获取DOM元素是许多开发者经常遇到的难题。其中，$el和$refs作为Vue中获取DOM元素的两个重要属性，它们之间的区别和使用场景，更是成为了众多前端开发者心中的"痛点"。今天，就让我们一起深入探讨这两个属性，揭开它们的神秘面纱，掌握在不同场景下的正确使用方法，避免踩坑！

一、Vue中$el和$refs的基本概念

在开始详细对比之前，我们先来了解一下$el和$refs的基本概念。

1.1 $el属性

$el是Vue实例的一个属性，它指向的是Vue实例所挂载的DOM元素。简单来说，当你在Vue中通过new Vue()创建一个实例，并使用el选项指定一个挂载点时，$el就会指向这个挂载点对应的DOM元素。

// 创建一个Vue实例
new Vue({
  el: '#app', // 指定挂载点为id为app的DOM元素
  // 其他选项
  data: {
    message: 'Hello, Vue!'
  }
}).$mount();

// 此时，$el就指向了id为app的DOM元素
console.log(this.$el);

在上述代码中，我们创建了一个Vue实例，并将其挂载到了id为app的DOM元素上。通过this.$el，我们就可以获取到这个挂载点对应的DOM元素。

1.2 $refs属性

$refs是一个对象，用于注册引用信息。当在元素上设置ref特性时，相应的DOM元素或子组件实例将被注册到$refs对象中。它就像是一个"花名册"，记录着你在模板中标记过的DOM元素或子组件。

<template>
  <div>
    <input ref="inputBox" type="text" />
    <button @click="handleClick">点击获取输入框内容</button>
  </div>
</template>

<script>
export default {
  methods: {
    handleClick() {
      // 通过$refs获取ref为inputBox的DOM元素
      const inputElement = this.$refs.inputBox;
      console.log(inputElement.value);
    }
  }
};
</script>

在这个例子中，我们在<input>元素上设置了ref="inputBox"，然后在handleClick方法中，通过this.$refs.inputBox就可以获取到这个<input>元素的DOM对象，并进一步操作它的属性和方法。

二、$el和$refs在获取DOM元素时的区别

2.1 指向对象不同

• $el ：始终指向Vue实例所挂载的根DOM元素，是一个单一的DOM元素对象。例如，在一个页面中，如果Vue实例挂载到了<div id="app"></div>上，那么$el就只指向这个<div>元素。
• $refs ：可以指向多个DOM元素或子组件实例，是一个包含多个引用的对象。你可以在模板中为多个元素设置ref，然后通过$refs获取到这些元素的集合。

2.2 使用时机不同

• $el ：在Vue实例挂载完成后就可以使用，也就是在mounted钩子函数中就能够获取到$el。因为mounted钩子函数会在实例挂载到DOM后被调用，此时$el已经指向了正确的DOM元素。

export default {
  mounted() {
    console.log(this.$el.textContent); // 可以获取到挂载元素的文本内容
  }
};

• $refs ：需要在组件的nextTick方法或者更晚的生命周期阶段使用，因为$refs是在组件的render函数执行完毕后才会被填充。如果在created或mounted钩子函数中过早使用$refs，可能会获取不到对应的DOM元素。

import { nextTick } from 'vue';

export default {
  mounted() {
    nextTick(() => {
      const element = this.$refs.myElement;
      console.log(element); // 确保能获取到正确的DOM元素
    });
  }
};

2.3 适用场景不同

• $el：适用于对整个Vue实例所挂载的DOM元素进行操作的场景，比如修改根元素的样式、获取根元素的尺寸等。
• $refs：更适合用于对特定的DOM元素或子组件进行操作的场景，例如获取表单输入框的值、调用子组件的方法等。

2.4 响应式不同

• $el：它所指向的DOM元素是固定的，不会随着数据的变化而改变，不具备响应式。
• $refs ：虽然$refs本身不是响应式的，但是当你通过$refs获取到的DOM元素的属性发生变化时，你可以通过重新获取$refs来获取最新的状态。不过，这种方式并不像Vue的响应式数据那样自动更新视图，需要手动处理。

三、不同场景下的选择使用

3.1 全局DOM操作场景

当你需要对整个Vue实例所挂载的DOM元素进行全局操作时，比如为页面添加一个全局的遮罩层，或者修改根元素的整体样式，使用$el会更加方便。

export default {
  mounted() {
    // 为根元素添加一个class
    this.$el.classList.add('global-mask');
  }
};

在这个例子中，我们通过$el获取到了Vue实例挂载的根DOM元素，并为其添加了一个global-mask的class，从而实现了全局样式的修改。

3.2 局部DOM元素操作场景

如果只是需要对页面中的某个特定元素进行操作，比如获取一个按钮的点击次数，或者获取一个输入框的值，这时就应该使用$refs。

<template>
  <div>
    <input ref="countInput" type="text" />
    <button @click="incrementCount">增加计数</button>
    <p>当前计数: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    };
  },
  methods: {
    incrementCount() {
      const inputElement = this.$refs.countInput;
      this.count = parseInt(inputElement.value) + 1;
    }
  }
};
</script>

在上述代码中，我们通过$refs获取到了<input>元素，并在按钮点击事件中，根据输入框的值进行计数的增加操作。

3.3 子组件交互场景

当涉及到与子组件进行交互时，$refs同样发挥着重要作用。你可以通过$refs获取到子组件的实例，进而调用子组件的方法或访问子组件的属性。

<template>
  <div>
    <child-component ref="child"></child-component>
    <button @click="callChildMethod">调用子组件方法</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  methods: {
    callChildMethod() {
      const child = this.$refs.child;
      child.childMethod(); // 调用子组件的方法
    }
  }
};
</script>

在这个例子中，我们在父组件中通过$refs获取到了子组件的实例，并在按钮点击事件中调用了子组件的childMethod方法。

3.4 动态DOM元素场景

对于动态生成的DOM元素，$refs也能很好地应对。你可以在动态创建元素时，为其设置ref，然后通过$refs获取到这些动态元素。

<template>
  <div>
    <button @click="addElement">添加元素</button>
    <div v-for="(item, index) in elements" :key="index" :ref="`dynamicElement${index}`">
      {{ item }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      elements: []
    };
  },
  methods: {
    addElement() {
      this.elements.push(`元素${this.elements.length + 1}`);
      // 确保在DOM更新后获取元素
      this.$nextTick(() => {
        const dynamicElement = this.$refs[`dynamicElement${this.elements.length - 1}`];
        console.log(dynamicElement.textContent);
      });
    }
  }
};
</script>

在上述代码中，我们通过点击按钮动态生成了一些DOM元素，并为每个元素设置了动态的ref。然后在addElement方法中，使用$nextTick和$refs获取到了最新生成的DOM元素。

四、注意事项与常见错误

4.1 避免过早使用$refs

如前面所说，$refs需要在组件的render函数执行完毕后才会被填充。因此，在created钩子函数中使用$refs是获取不到对应元素的，会导致undefined的错误。一定要在合适的生命周期阶段，如mounted配合nextTick或者更晚的阶段使用$refs。

4.2 注意$refs的非响应式特性

虽然$refs可以获取到DOM元素，但是它本身不是响应式的。如果依赖$refs中的DOM元素状态来更新视图，需要手动处理。例如，当DOM元素的某个属性发生变化时，你需要重新获取$refs并更新相关的视图逻辑。

4.3 合理使用$el

使用$el进行全局DOM操作时，要注意不要过度修改根元素，以免影响整个页面的布局和样式。同时，也要注意在合适的生命周期阶段使用$el，确保DOM元素已经挂载完成。

那么，在Vue中，$el和$refs的区别是什么？

在Vue中，$el和$refs都与DOM元素的获取和操作有关，但它们之间存在一些区别，以下是具体介绍：

概念和性质

• $el：是每个Vue实例都有的一个属性，它指向的是Vue实例所挂载的根DOM元素。当你使用new Vue()创建一个Vue实例并指定了挂载点（比如el: '#app'），那么$el就会指向页面中id为app的那个DOM元素。它是在Vue实例初始化过程中自动赋值的，并且是一个直接指向根元素的引用。
• $refs：是一个对象，用于在Vue组件中引用子元素或组件。你可以在模板中通过给元素或组件添加ref属性来标识它们，然后在组件的代码中通过$refs来访问这些被标识的元素或组件。$refs中的引用是在组件渲染完成后才会被填充，它可以包含多个不同的引用，取决于你在模板中设置了多少个ref。

访问时机和场景

• $el：通常在组件的生命周期钩子函数中，比如mounted钩子函数中，可以通过this.$el来访问挂载的根DOM元素，进行一些与根元素相关的操作，比如获取根元素的样式、属性，或者在根元素上添加一些自定义的DOM事件等。因为它是在Vue实例初始化时就确定的，所以在整个组件的生命周期内，$el所指向的元素是固定不变的。
• $refs：更适合在需要访问组件内特定子元素或子组件的场景下使用。例如，你可能有一个表单组件，需要在提交表单时获取某个输入框的值，就可以给这个输入框添加ref属性，然后在提交表单的方法中通过$refs来获取该输入框的DOM元素，进而获取其值。另外，当你需要对某个子组件进行方法调用或访问其属性时，也可以通过$refs来实现。

代码示例

下面通过具体的代码示例来展示它们的用法和区别：

<template>
  <div id="app" ref="appRef">
    <!-- 给输入框添加ref属性 -->
    <input type="text" ref="inputRef" placeholder="请输入内容">
    <button @click="getValue">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  mounted() {
    // 访问挂载的根DOM元素
    console.log(this.$el); 
    // 通过$refs访问具有ref属性的元素
    console.log(this.$refs.inputRef); 
  },
  methods: {
    getValue() {
      // 获取输入框的值
      const inputValue = this.$refs.inputRef.value;
      console.log('输入框的值为：', inputValue);
    }
  }
};
</script>

在上述代码中，this.$el指向的是id为app的div元素，而this.$refs.inputRef指向的是那个输入框元素。通过这个例子可以清楚地看到$el和$refs在获取DOM元素时的不同方式和用途。

总结

$el主要用于访问Vue实例挂载的根DOM元素，是一个相对固定的、与Vue实例紧密关联的引用；而$refs则更侧重于在组件内部灵活地引用特定的子元素或子组件，方便进行更细致的DOM操作或组件间的交互。在实际开发中，需要根据具体的需求和场景来选择使用$el还是$refs，以实现高效、灵活的DOM元素访问和操作。

那么，在实际开发中，如何选择使用$el和$refs？

当操作根DOM元素时使用$el

• 场景 ：在需要对Vue实例所挂载的整个区域进行操作时，比如获取根元素的尺寸、位置，或者给根元素添加全局的事件监听器，以及修改根元素的整体样式等场景下，使用$el会更加直接和方便。
• 示例 ：在组件的mounted钩子函数中，想要获取整个应用的根元素的宽度，可以这样写：

mounted() {
  // 通过$el获取根元素的宽度
  const rootWidth = this.$el.offsetWidth; 
  console.log('根元素的宽度为：', rootWidth);
}

当操作子元素或子组件时使用$refs

• 场景 ：在表单处理、动画效果、组件通信等场景中，经常需要获取特定子元素的值或状态，或者调用子组件的方法，这时$refs就派上用场了。
• 示例 ：有一个包含多个输入框的表单，在提交表单时需要验证某个特定输入框是否为空，可以给该输入框添加ref属性，然后在提交方法中通过$refs来获取并验证：

<template>
  <form>
    <input type="text" ref="usernameRef" placeholder="请输入用户名">
    <input type="password" ref="passwordRef" placeholder="请输入密码">
    <button @click="submitForm">提交</button>
  </form>
</template>

<script>
export default {
  methods: {
    submitForm() {
      // 通过$refs获取用户名输入框的值
      const username = this.$refs.usernameRef.value; 
      if (!username) {
        console.log('用户名不能为空');
        return;
      }
      // 其他表单验证和提交逻辑
    }
  }
};
</script>

那么，在Vue2和Vue3实际项目开发中，在使用$el和$refs有什么区别？

在Vue2和Vue3实际项目开发中，$el和$refs在使用上有一些区别，主要体现在以下几个方面：

$el的区别

• 获取时机
  • Vue2 ：在mounted钩子函数中可以确保获取到$el，因为此时Vue实例已经完成挂载，$el已指向正确的DOM元素。
  • Vue3 ：同样可以在mounted钩子中获取$el。不过，Vue3的组合式API中，在 setup函数内使用onMounted钩子来获取$el，与Vue2的选项式API在写法上有所不同，但获取时机和效果是类似的。
• 使用场景
  • Vue2：常用来在组件挂载后对根DOM元素进行一些初始化操作，比如添加自定义属性、绑定全局事件等。
  • Vue3 ：使用场景与Vue2基本一致，但在组合式API中，相关操作可能会更集中在setup函数及其内部的钩子函数中，代码组织方式有所变化。

$refs的区别

• 获取时机
  • Vue2 ：在组件渲染完成后，$refs对象会被填充，此时可以通过$refs访问到设置了ref的元素或组件。但要注意，如果在mounted钩子中访问$refs，需要确保相关元素已经渲染完成。
  • Vue3 ：在setup函数中，需要使用ref函数来声明响应式的ref变量，然后在模板中通过v-bind:ref指令将其绑定到元素或组件上。在组件渲染完成后，可以通过这个ref变量来访问对应的DOM元素或组件。与Vue2相比，Vue3的$refs获取方式更加明确和灵活，且在组合式API中更便于进行响应式处理。
• 使用场景
  • Vue2：常用于在组件内部获取子元素或子组件的实例，以便调用其方法或访问其属性，比如在表单提交时获取输入框的值，或者在动画效果中操作特定元素。
  • Vue3 ：使用场景与Vue2类似，但在组合式API中，可以更方便地将$refs相关的逻辑封装在独立的函数中，提高代码的复用性和可维护性。例如，可以将获取某个ref元素并进行操作的逻辑封装在一个setup函数内部的函数中，然后在需要的地方调用该函数。

代码示例

以下是Vue2和Vue3中使用$el和$refs的代码示例，以便更直观地感受它们的区别。

Vue2示例

<template>
  <div id="app">
    <input type="text" ref="inputRef" placeholder="请输入内容">
    <button @click="getValue">获取输入框的值</button>
  </div>
</template>

<script>
export default {
  mounted() {
    console.log(this.$el);
    console.log(this.$refs.inputRef);
  },
  methods: {
    getValue() {
      const inputValue = this.$refs.inputRef.value;
      console.log('输入框的值为：', inputValue);
    }
  }
};
</script>

Vue3示例

<template>
  <div id="app">
    <input type="text" v-bind:ref="inputRef" placeholder="请输入内容">
    <button @click="getValue">获取输入框的值</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个ref响应式变量
    const inputRef = ref(null);

    onMounted(() => {
      console.log(document.getElementById('app'));
      console.log(inputRef.value);
    });

    const getValue = () => {
      const inputValue = inputRef.value.value;
      console.log('输入框的值为：', inputValue);
    };

    return {
      inputRef,
      getValue
    };
  }
};
</script>

总的来说，Vue3在$el和$refs的使用上与Vue2基本功能相似，但在组合式API的加持下，代码的组织和逻辑处理更加灵活和高效，开发者可以根据自己的项目需求和开发习惯选择合适的方式来使用$el和$refs。

基于性能和可维护性考虑

• 性能方面 ：如果只是简单地获取根元素进行一些常规操作，$el的性能相对较高，因为它是在Vue实例初始化时就确定的单一引用。而$refs在访问多个元素时可能会有一些性能开销，尤其是在频繁访问或操作大量ref引用的元素时，需要注意性能问题。
• 可维护性方面 ：使用$refs时，要确保ref的命名具有清晰的语义，这样在代码阅读和维护时能够快速理解其用途。如果ref使用不当或命名混乱，可能会导致代码难以理解和维护。相比之下，$el的用途比较明确，就是指向根元素，在维护时更容易定位和理解相关代码的作用。

五、总结

通过以上详细的介绍和对比，相信大家对Vue中$el和$refs在获取DOM元素时的区别以及在不同场景下的使用方法有了更深入的理解。$el适用于对整个Vue实例挂载的DOM元素进行全局操作，而$refs则更适合对特定的DOM元素或子组件进行操作。在实际开发中，我们要根据具体的需求和场景，合理选择使用这两个属性，避免踩坑，提高开发效率。

希望这篇文章能够帮助到正在学习Vue的前端工程师们，如果你在实际开发中还有其他关于Vue的问题，欢迎在评论区留言交流，让我们一起在前端开发的道路上不断进步！