关于前端:Vue-mounted阶段获取不到dom的原因及解决方法

形容：
须要在dom渲染后，遍历页面中各模块元素，获取各个模块的高度。
在mounted阶段用document.querySelector()以及this.$refs获取元素均获取不到。用两种形式获取元素，打印进去的后果都是undefined。
有解答说用this.$nextTick(function(){...})，试了一下在我这个场景中，后果还是undefined。

起因：
在mounted阶段，若须要获取的元素或组件有v-if，v-for属性。
v-if的初始化后果为false。v-for遍历的数组初始化阶段无值。（即mounted阶段后，依据取得的后盾数据来动静操作dom）这两种状况都会导致mounted阶段获取元素的语句获取不到dom。

解决办法：
1、把获取元素的语句放在异步获取到数据，赋值给data中的key之后进行。同时须要给获取元素的语句加上setTimeout。因为setTimeout是宏工作，会在vue的render函数执行之后再执行。
2、把获取元素的语句放到updated周期中执行。这种状况下每次视图更新之后都会执行一次获取元素的语句，如果不须要每次视图更新之后都执行，能够在mounted周期中，应用this.$once("hook: updated", function() {...}) ，让获取元素的语句只在updated阶段执行一次。