(Vue2/Vue3)Vue onmouted querySelector找不到dom

1 - 问题及原因解析:

1.1 - 问题:

我们无论写vue还是react都有可能会遇到在已挂载的生命周期函数中使用queryselector之类的原生方式获取不到真实dom的情况。

1.2 - 原因:

我们首先要明白onmounted这类生命周期函数是在当前组件中的静态元素的真实dom被挂载后执行的(注意:是静态元素哦),而我们在onmounted事件中是获取不到那些v-if v-for之类的动态渲染的元素的真实dom的,因为这些动态渲染的dom绑定的响应式变量,而在onmunted被调用的时候这些响应式变量都处于初始化状态,都是空值,那么这些真实dom当然还没有被挂载。
我们用js去思考动态渲染的元素就很容易明白了:

// 思考一个问题:我们使用js如何实现动态挂载元素,再获取元素dom的?
// 1 - 当然是先把动态元素都弄到html里
// 2 - 然后再去获取这些动态元素的dom啦
// 先把动态元素都弄到html里
// 假设有个静态的div元素的id是 root
document.querySelector('#root').html = '<div id="test-dom-1">1<div>'
// 去获取这些动态元素的dom
const testDom = document.querySelector('#test-dom-1')

2 - 解决方案:

既然想明白了原因和原理,那解决方案就从这方面入手就行了;
2.1 - (本人推荐方案) 可以通过watchEffect去监听v-if v-for 绑定的响应式变量,然后进行相应的获取真实dom的操作(方案代码,等我有时间了会补上);

2.2 - (不推荐) 也有网友提到用setTimeout(()=>{}, 300) 这种方式去再onmouted里去获取真实dom,虽然确实有效,但是这完全不合理,因为通过延迟执行获取dom是不可靠的,也许正常情况下大多数动态挂载的dom能够在几百毫秒内挂载完成,但是一旦随着项目开发,万一一个组件被越写越糟糕,那这延迟的时间就说不准了;

作者:wtbspkr原文地址:https://segmentfault.com/a/1190000043842348

%s 个评论

要回复文章请先登录注册