页面加载第一次获取不到 this.$refs

在使用this.$refs来获取DOM或组件时，有时会遇到无法获取到this.$refs的情况。在你提供的引用内容中，出现了两种解决办法。

第一种解决办法是在页面加载完成后，使用this.$nextTick()方法来获取this.$refs。这个方法会在下次DOM更新循环结束之后执行指定的回调函数。可以使用如下代码来解决问题：

this.$nextTick(() => {
  console.log(this.$refs)
})

这样在下次DOM更新循环结束后，就可以获取到this.$refs的值了。

第二种解决办法是使用watch来监听父组件传入的props，并在props发生变化时执行相应的操作。例如，在visible属性发生变化时，使用this.$nextTick()方法来获取this.$refs。具体的代码可以参考下面的示例：

watch: {
  visible(i1, i2) {
    this.visible2 = i1
    if (i1) {
      this.init()
    }
  },
},
methods: {
  init() {
    this.$nextTick(() => {
      if (this.type == 1) {
        this.$refs.graphNode.init()
      } else if (this.type == 2) {
        this.$refs.graphLink.init()
      }
    })
  }
}

通过使用watch监听props的变化，并在合适的时机使用this.$nextTick()方法来获取this.$refs，可以解决页面加载第一次获取不到this.$refs的问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>