面试题：Vue中mounted阶段如何正确获取DOM元素并进行初始化操作

Question

在Vue组件的mounted生命周期钩子中，假设模板里有一个id为'myDiv'的div元素，如何获取该元素并给它添加一个'active'的class？请写出具体代码，并解释为什么要在mounted阶段做这样的操作。

Answer 1

代码如下：

<template>
  <div>
    <div id="myDiv"></div>
  </div>
</template>

<script>
export default {
  mounted() {
    const myDiv = document.getElementById('myDiv');
    if (myDiv) {
      myDiv.classList.add('active');
    }
  }
}
</script>

为什么在mounted阶段操作：

1. 组件渲染时机：mounted生命周期钩子在组件挂载到DOM后被调用。这意味着此时模板中的所有元素都已经被渲染到页面上，所以可以通过常规的DOM操作方法获取到元素。
2. 避免过早操作：在created等生命周期钩子中，虽然组件实例已经创建，但模板尚未挂载到DOM，此时获取元素会返回null，无法进行添加class等操作。而mounted阶段，组件已经成功挂载，确保了元素可以被正确获取并操作。