页面加载完成时为什么也会执行一次

在页面加载完成时执行一次的主要原因是浏览器解析 HTML 文档时遇到 JavaScript 代码，会立即执行这些代码。如果你的 JavaScript 代码被放在 HTML 文档的头部或者中间部分，那么在浏览器加载完文档之前，JavaScript 代码就已经被执行了一次，而在文档加载完成后，JavaScript 代码又会被再次执行一次。为了避免这种情况，可以把 JavaScript 代码放在 HTML 文档底部或者使用 defer 属性来延迟脚本的执行，这样可以确保 JavaScript 代码只会被执行一次。

相关问题

页面加载第一次获取不到 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>

vue父子页面,打开子页面每次created仅第一次执行

在Vue框架中，当使用父子组件之间的路由导航时，打开子页面时，每次created钩子函数仅在第一次打开页面时被执行。

这是因为Vue中的实例被创建后，created钩子函数会在实例被创建完成后立即被调用，用于初始化数据、进行异步请求等操作。而在路由切换时，Vue会复用已经存在的组件实例，而不是每次都重新创建一个新的实例。

所以，当从父组件导航到子组件时，实际上是同一个组件实例复用了，并没有销毁和重新创建。因此，created钩子函数只会在第一次打开子页面时执行一次，之后再次打开该子页面时不会再次执行。

如果需要每次打开子页面都执行created钩子函数，可以使用Vue的keep-alive组件来对子组件进行缓存。将子组件放置在keep-alive组件中，在每次从父组件导航到子组件时，都会重新渲染缓存的子组件实例，从而触发created钩子函数的执行。

需要注意的是，在使用keep-alive组件时，由于子组件被缓存，因此可能需要处理子组件的数据重置和重新加载等问题，以确保每次打开子页面都能正常运行。