iframe导致vue的mounted执行了两次

在使用 Vue 进行前端开发过程中，我们经常会遇到各种问题和挑战，其中一个常见的问题就是在使用 iframe 时导致 Vue 的 mounted 生命周期函数被触发两次的情况。这个问题可能会导致一些意想不到的结果和 bug，因此了解它的原因并正确处理是非常重要的。

问题描述

在某些情况下，当我们在 Vue 组件中使用 iframe 时，mounted 生命周期函数会被调用两次。例如，考虑以下的 Vue 组件：

<template>
  <div>
    <iframe id="myIframe" :src="iframeUrl"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: "https://example.com"
    }
  },
  mounted() {
    console.log("mounted")
  }
}
</script>

上述组件的目的是在 div 元素中嵌入一个 iframe，并在 mounted 生命周期函数中打印出 “mounted” 字符串。然而，在组件初始化时，我们却可以看到 “mounted” 被打印了两次。

问题分析

这个问题的原因是由 Vue 的渲染机制和 iframe 的加载机制所导致的。在 Vue 的经典渲染模式下，mounted 生命周期函数会在组件第一次渲染完毕后被调用。而在使用 iframe 时，它的加载需要额外的时间，这就导致了先渲染 iframe 内容，然后再渲染组件内容。因此，当 iframe 加载完成后，会触发父组件的重新渲染，导致 mounted 生命周期函数再次被调用。

解决方法

要解决这个问题，我们需要在设计上进行一些调整，以确保 mounted 生命周期函数只会被调用一次。

一种解决方法是通过添加一个 flag 来控制 mounted 生命周期函数的执行次数。我们可以创建一个 data 属性，例如 isMounted，默认值为 false，然后在 mounted 生命周期函数中将它设置为 true。在 mounted 函数中添加一条条件语句，只有在 isMounted 的值为 false 时，才执行 mounted 的逻辑。

<template>
  <div>
    <iframe id="myIframe" :src="iframeUrl" @load="iframeLoaded"></iframe>
  </div>
</template>

<script>
export default {
  data() {
    return {
      iframeUrl: "https://example.com",
      isMounted: false
    }
  },
  mounted() {
    if (!this.isMounted) {
      console.log("mounted")
      this.isMounted = true
    }
  },
  methods: {
    iframeLoaded() {
      console.log("iframe loaded")
    }
  }
}
</script>

在这个解决方案中，我们通过在 iframe 的 load 事件中调用一个新的方法 iframeLoaded 来获取 iframe 加载完成的状态。在这个方法中，我们可以根据需要进行一些处理，例如设置 iframe 的高度等。这样，我们就可以避免 mounted 生命周期函数被调用两次的问题。

总结

使用 iframe 时导致 Vue 的 mounted 生命周期函数被调用两次是一个常见的问题。原因是因为 iframe 的加载机制和 Vue 的渲染机制不同。为了解决这个问题，我们可以通过添加一个 flag 来控制 mounted 生命周期函数的执行次数，并在 iframe 的加载完成事件中进行一些处理。