.vue组件中获取DOM元素问题

一、问题引入
原项目把一块内容直接写在了模块中（浏览器显示的一整个页面），现在想把它提成一个单独组件，而且把其中使用document.getElementById('id')改为ref获取元素的形式。

<template>
      <!--......-->
     <div id='transferRelation' style='width:100%;height: 500px'></div>
      <!--......-->
</template>
<script>
export default {
  methods: {
      getRely (applicationVersionId) {
        let _this = this;
        //axio获取数据，成功后调用drawRelationChart 初始化echart表格
      },
      drawRelationChart (param) {
        this.relationChart = echarts.init(document.getElementById('transferRelation'));
        //...
      }
}
</script>

单独创建一个.vue组件，通过绑定传值，触发页面变化从而触发beforeUpdate。

<template>
  <div class="contain_div">
    <div v-if="relyData.data!=undefined && relyData.data.length>0?true:false">
      <div
        class='transferRelation'
        ref="transferRelation"
      ></div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    relyData: {
      type: Object,
      default() {
        return {
          data: [],
          link: []
        };
      }
    }
  },
  mounted() {
    console.log("调用关系-mounted");
    console.log(_this.$refs.transferRelation);
  },
  beforeUpdate() {
    console.log("调用关系-beforeUpdate");
    const _this = this;
    //初始化图表
    console.log(_this.$refs.transferRelation);
    //TODO
  }
};
</script>

然后发现beforeUpdate()中根本获取不到此元素，用原生js获取也不行。

然后发现mounted中也获取不到。

二、问题说明
mounted()生命周期函数，页面还未真正挂载到浏览器上，执行完成后立马挂在，所以无法获取到页面元素。
beforeUpdate()生命周期函数，浏览器页面还未重新跟新加载，也无法获取到元素。

三、解决
1、beforeUpdate()生命周期函数中，在获取元素语句外套用this.$nextTick(function(){...})。（mounted无效，原因待查明）
官方解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。即DOM真正加载完成。

2、直接使用updated生命周期函数，页面重新加载完毕。