天天看点

Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)

作者:DeveloperNote

原理:获取更新后的dom内容

场景:插件挂载,获取最新dom ,new 插件挂载

之前遇到一个很无聊的人,问怎么在created函数里获取 dom?正常逻辑是获取dom就必须挂载完成后才能获取,其实这里这个无聊的人就只想引出 this.$nextTick。

先用一个例子看下,如图可以发现,在created函数中使用 this.$nextTick 是挂载后异步执行,因此可以在created函数中使用 this.$nextTick 获取dom, 结果: 11 22 33 44

Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)

实例1(beforeCreate操作dom):在当前的代码,我们可以看出dom操作是在 beforeCreate 中实现的,实际上懂的都懂,一个没用的冷知识。

Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)
Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)

实例2(获取最新dom):data改变,视图已变化,但是 dom 不是最新的

(1)由下图看出,当str赋值修改data后,打印出来的dom依旧是之前的值

Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)
Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)

(2)当在函数内,修改str值后,通过this.$nextTick获取的dom,则是更新后的值

Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)
Vue2-在生命周期created中获取dom(通过异步nextTick获取dom)