vue3两次调用同一个生命周期的方法

在 Vue 3 中，可以使用 `onMounted`、`onUpdated`、`onUnmounted` 等钩子函数来代替 Vue 2.x 中的生命周期函数。如果需要在不同的地方调用相同的函数，可以将该函数定义为一个普通的 JavaScript 函数，然后在需要的地方进行调用。

示例代码：

import { onMounted, onUnmounted } from 'vue'

function myFunction() {
  console.log('myFunction called')
}

export default {
  setup() {
    onMounted(() => {
      // 在组件挂载时调用 myFunction
      myFunction()
    })

    onUnmounted(() => {
      // 在组件卸载时调用 myFunction
      myFunction()
    })
  }
}

在上面的示例中，我们将 `myFunction` 定义为一个普通的 JavaScript 函数，并在组件的 `setup` 函数中使用 `onMounted` 和 `onUnmounted` 调用该函数。这样，在组件挂载时和卸载时，都会调用同一个函数。

相关问题

vue3 async await调用生命周期

### Vue 3 中使用 `async` 和 `await` 调用生命周期钩子

在 Vue 3 中，通过 Composition API 可以更灵活地利用 `async` 和 `await` 来处理异步操作。这不仅简化了代码结构，也提高了可读性和维护性。

#### 定义异步生命周期钩子

当希望在一个生命周期钩子里执行异步操作时，可以直接将这个钩子定义为一个 `async` 函数。例如，在组件挂载 (`onMounted`) 后发起网络请求：

import { onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    onMounted(async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        console.log(response.data);
      } catch (error) {
        console.error("Failed to fetch data", error);
      }
    });

    return {};
  },
};

此段代码展示了如何安全地进行数据获取并处理可能发生的错误[^4]。

#### 并发请求

如果需要在同一时刻发出多个独立的 HTTP 请求，则可以通过 `Promise.all()` 结合 `await` 实现高效的并发加载：

import { onMounted } from 'vue';
import axios from 'axios';

export default {
  setup() {
    onMounted(async () => {
      try {
        const [response1, response2] = await Promise.all([
          axios.get('https://api.example.com/data1'),
          axios.get('https://api.example.com/data2')
        ]);
        
        console.log([response1.data, response2.data]);
      } catch (error) {
        console.error("One or more requests failed.", error);
      }
    });

    return {};
  },
};

这种方法能够显著减少总的等待时间，因为两个请求几乎是同时完成的。

#### 错误重试机制

对于那些可能会失败的关键请求，还可以加入简单的重试逻辑来增强应用健壮性：

function retry(fn, retriesLeft = 5, interval = 1000) {
  return new Promise((resolve, reject) => {
    fn().then(resolve).catch(error => {
      setTimeout(() => {
        if (retriesLeft === 1) {
          // 如果尝试次数耗尽则拒绝当前承诺
          return reject(error);
        }

        // 继续下一次尝试
        retry(fn, retriesLeft - 1, interval).then(resolve).catch(reject);
      }, interval);
    });
  });
}

// 使用方法如下：
retry(() => axios.get('https://api.example.com/unstable-endpoint'))
  .then(data => console.log(`Success after ${data.retries} attempts.`))
  .catch(err => console.error('All retries have been exhausted.', err));

这段辅助函数允许指定最大重试次数以及每次重试之间的间隔时间，从而更好地应对临时性的服务端问题。

vue3刷新页面时会调用的生命周期

### Vue3 页面刷新触发的生命周期钩子

当浏览器中的页面发生刷新操作时，在Vue3应用中，原有的JavaScript上下文会被销毁并重新创建。这意味着对于单页应用程序(SPA)，整个Vue实例将会经历一次完整的卸载和加载过程。

具体来说：

- 当前活动的Vue组件及其挂载的DOM节点都会被移除，这期间会依次调用`beforeDestroy` (在即将废弃的选项API下) 或 `onBeforeUnmount`以及`onUnmounted` 钩子[^2]。

import { onBeforeUnmount, onUnmounted } from 'vue';

export default {
  setup() {
    onBeforeUnmount(() => {
      console.log('Component is about to be destroyed.');
    });

    onUnmounted(() => {
      console.log('Component has been destroyed.');
    });
    
    // ...
  }
}

- 浏览器完成页面重绘之后，新的Vue实例开始初始化流程，此时会按照顺序执行`setup()`内的逻辑（如果使用的是组合式API），接着是`onMounted`钩子函数来响应首次渲染后的处理需求。

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component has been mounted or re-mounted after refresh.');
    });
    
    // ...
  }
}

因此，在页面刷新的情况下，实际上旧有的组件实例经历了从准备销毁到最终销毁的过程(`onBeforeUnmount`, `onUnmounted`)；而新构建的应用则走过了正常的启动路径直至挂载完成(`onMounted`)。需要注意的是，由于每次刷新都是独立事件，所以不存在任何跨越两次不同浏览会话之间的状态保持机制[^3]。