关于Vue组件无法通过Dom获取元素的问题

问题描述：

最近想做个好看一点的登录界面，于是在codepen上查找相关素材，正常情况下页面元素切换没有问题，但准备进行vue组件封装时，发现页面样式无法改变。 document.querySelector的相关操作无法获得元素，返回的始终是null。因此相关的样式变化无法生效。

问题分析：

Vue 推荐使用 template 来创建 HTML。但是模板毕竟是模板，不是真实的dom节点。vue会先利用对象中的render 函数，生成虚拟节点并挂载，挂载的真实DOM是进行异步渲染的，并且在修改完状态后也是异步的方式进行渲染。代码中将document.querySelector操作定义为同步任务，此时事件队列应该是：

• 同步队列：获取dom元素，
• 异步队列：从虚拟节点转真实节点并进行渲染

根据先同步后异步的执行流程，是获取不到dom元素的

解决方案：

既然DOM无法直接得到，那么可以让组件加载完后再尝试相关元素的操作，1、使用setTimeout方法，在动态创建元素之后的一段时间(这个时间非常的短)去执行获取dom元素的操作。或者使用window.addEventListener("load", 方法名)，让页面加载完后再操作;

只要移动一下源代码中获取dom'元素操作的相关位置就可以

<script >

let getButtons = (e) => e.preventDefault()

let changeForm = (e) => {
    let switchC1 = document.querySelector("#switch-c1");
    let switchC2 = document.querySelector("#switch-c2");
    let switchCircle = document.querySelectorAll(".switch__circle");
    
    let aContainer = document.querySelector("#a-container");
    let bContainer = document.querySelector("#b-container");
    let switchCtn = document.querySelector("#switch-cnt");
    switchCtn.classList.add("is-gx");
    setTimeout(function(){
        switchCtn.classList.remove("is-gx");
    }, 1500)

    switchCtn.classList.toggle("is-txr");
    switchCircle[0].classList.toggle("is-txr");
    switchCircle[1].classList.toggle("is-txr");
    switchC1.classList.toggle("is-hidden");
    switchC2.classList.toggle("is-hidden");
    aContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-txl");
    bContainer.classList.toggle("is-z200");
}
let mainF = (e) => {
    let allButtons = document.querySelectorAll(".submit");
    let switchBtn = document.querySelectorAll(".switch-btn");
    for (var i = 0; i < allButtons.length; i++)
        allButtons[i].addEventListener("click", getButtons );
    for (var i = 0; i < switchBtn.length; i++)
        switchBtn[i].addEventListener("click", changeForm)
}
window.addEventListener("load", mainF);
</script>

项目源地址：

https://codepen.io/ricardoolivaalonso/pen/YzyaRPNhttps://codepen.io/ricardoolivaalonso/pen/YzyaRPN

之后会对该项目进行完整的分析，有兴趣的小伙伴可以跟我一起学习，也请大佬们多多指正