頁面如下：

<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。

以上，留做記錄。