vue项目中当组件绑定v-if或者:visible.sync时，获取不到this.$refs(打印为空）

vue项目中当组件绑定v-if或者:visible.sync时，获取不到this.$refs(打印为空）

例如：

省略上下文....
 <el-dialog :visible.sync="dialogShow" >
<div ref="map"></div>
</el-dialog>

当想要操作该DOM时，在methods中使用this.$refs.map，控制台报错

此时在控制台打印this.$refs输出：

很显然此时map节点还未加载,要想在这里访问到$refs中的map，我们需要使用异步方法，在el-dialog节点渲染之后访问，那具体到这个例子中的代码：

省略上下文.......

methods:{
    dialog(){
        this.dialogShow=true
        this.$nextTick(() => {
           console.log(this.$refs)
           //需要对节点进行的操作也在this.$nextTick中进行
      })
    }
}

 再次打印this.$refs输出：

此时就可以访问this.$refs中的元素了（this.$refs.xxx）