Vue中通过原生Js方法获取元素为null的问题

首先要知道通过原生js方法获取元素，需要在vue生命周期钩子函数mounted挂载完元素后使用。如果在此之前使用，元素还不存在，获取到的是null。

import { onMounted } from 'vue';

onMounted(() => {
	const el = document.getElementById('id');
	console.log(el);
})

但是有时候还是会出现获取为null的情况，可能的原因：
1.元素通过v-if指令渲染。由于，v-if相关指令是动态加载元素组件的，也就是说当v-if指令为false时，该元素是不会出现在Element树中。此时可以用v-show指令替换
2.则是我遇到的情况，获取的元素是 Ant Design Vue的Modal弹窗里的元素。如果你在引用Modal的组件文件中的mounted钩子函数中获取元素，并console.log出来，会发现获取到的还是null。刷新页面，但是还未打开弹窗时，mounted里就已经console.log了null。
这是因为当未打开弹窗时，Modal还未在页面中创建。通过控制台搜索也是查不到的，当你打开了弹窗时，这时候页面元素才存在。

可以通过nextTick()方法解决。

nextTick() 等待下一次 DOM 更新刷新的工具方法

function openModal() {
	state.visible = true;
	const el = document.getElementById('id');
	console.log(el);				//null
	nextTick(()=> {
		const el = document.getElementById('id');
		console.log(el);			//<element>
	})
}