VUE中，HTML对象的ID动态绑定，在mounted中根据ID无法获取到对象

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/u010295735/article/details/82740369

页面如下：

<template>
    <div :id="objId" class="randomBoxDiv" :style="stylesBox">
    </div>
</template>

其中，div的ID是动态绑定的。

JavaScript代码如下：

<script>
export default {
  data() {
    return {
      objId: ""
    };
  },
  mounted: function() {
    this.initParm(); //参数初始化

    console.log($(".randomBoxDiv"));
    console.log(this.objId);
    console.log($("#"+this.objId));
  },
  methods:{
    initParm: function(){
	this.objId=this.getUid();
    },
    getUid: function() {
      function S4() {
        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
      }
      return "tagdiv" + S4() + S4() + S4() + S4();
    }
  }
 }
 </script>

浏览器console打印出来的对象，ID已经设置上了，但是用ID获取对象却获取不到。查资料以后发现，这跟vue的渲染顺序有关，在mounted执行时，dom其实并没有渲染完成，所以，在mounted中用动态的ID获取对象是获取不到的。解决方式即是用vue提供的$nextTick，如下：

mounted: function() {
    this.initParm(); //参数初始化

    console.log($(".randomBoxDiv"));
    console.log(this.objId);

    //把动态获取ID的操作放到this.$nextTick的回调中执行即可
    this.$nextTick(() => {
        console.log($("#"+this.objId));
    }
  }

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

以上，留做记录。