Vuemounted钩子函数获取节点高宽度出错

场景 1：涉及异步请求

• 问题：如图片是异步的 GET 请求，js 运行的肯定比图片 GET 要快，所以当执行 mounted 钩子函数的时候，图片还没有全部加载完，这时候就会得到一个错误的 offset 值

• 解决方案：(监听图片加载完成的事件)

  • 给图片加上 ref 属性，并在那个组件里的 mounted 钩子函数中写，

    this.$refs.img.onload = ()=>{Bus.$emit('loadImgSuccess')
    }

  • 这里的 Bus 是用的 EventBus，两个组件中事件响应的办法。

  • 需要得到 offsetTop 的组件中这样写，

    Bus.$on('loadImgSuccess', () => {var offsetTop = this.$refs.dom.offsetTop})

    这时候就可以确认每次不管是页面新打开还是当前页刷新都可以得到正确的 offset 值。

场景 2：使用 v -if

• 问题：可以检测 html 中是否用了 v -if , 因为默认值为 false 时的话，部分 dom 还未渲染当然获取不到
• 解决方案：将 v -if 改为 v -show, 则可以获取的到 dom，因为 v -show 会渲染 dom，只是控制 display 的显隐

场景 3：默认

• 解决方法：setTimeout 异步获取

  mounted() {setTimeout(() => {
          // 是否显示左右进度条
          this.updateNavScroll();}, 500);