vue3 keepalive中的子组件onActivated方法只执行了一次

`<keep-alive>` 组件会缓存被包裹的子组件，并在组件状态发生变化时触发相应的生命周期钩子函数。在 Vue 3 中，`<keep-alive>` 组件的 `activated` 钩子函数被重命名为 `onActivated`，同时加入了一个新的 `onDeactivated` 钩子函数。

在使用 `<keep-alive>` 组件时，如果子组件的 `onActivated` 方法只执行了一次，可能是因为该组件的 `activated` 钩子函数只触发了一次。这可能是因为两个原因：

1. 只有在被缓存的组件被激活时才会触发 `activated` 钩子函数。如果该组件只被激活了一次，那么 `activated` 钩子函数也只会执行一次。
2. 如果该组件在被缓存时已经被销毁了，那么在组件被重新激活时，`activated` 钩子函数也不会重新触发。

如果要解决这个问题，可以尝试使用 `<teleport>` 组件来替代 `<keep-alive>` 组件，或者在子组件的 `activated` 钩子函数中加入一些调试代码来确定问题出现的原因，然后进行相应的调整。

相关问题

vue3 keepalive 子组件onActivated只执行一次

在 Vue3 中，`<keep-alive>` 组件支持两个生命周期钩子函数 `onActivated` 和 `onDeactivated`，用于在组件被缓存并且再次被激活时执行相应的逻辑。如果子组件的 `onActivated` 只执行一次，可能是由于以下两个原因：

1. 子组件没有被缓存

`<keep-alive>` 组件只会缓存具有唯一 key 值的子组件，如果子组件没有设置 key 值，或者 key 值不唯一，子组件就不会被缓存。因此，确保子组件的 key 值唯一并且正确设置。

2. 子组件的状态没有发生变化

如果子组件的状态没有发生变化，即使子组件被缓存并且再次被激活，也不会触发 `onActivated` 钩子函数。因此，可以尝试在 `onMounted` 钩子函数中打印一些信息，查看子组件是否被正确渲染并且状态是否发生了变化。

另外，如果需要在每次子组件被激活时都执行相应逻辑，可以考虑在 `onBeforeRouteUpdate` 钩子函数中执行相应的逻辑，该钩子函数会在当前路由改变，但是组件被复用时调用。

vue3 子组件watch只监听一遍解决方法

在 Vue 3 中，子组件的 `watch` 默认情况下只会监听一次。这是因为在 Vue 3 中，子组件的 `watch` 选项默认是被封装成一个 `watchEffect` 函数的，`watchEffect` 函数会在组件挂载时执行一次，之后只有当依赖项发生变化时才会重新执行。

如果需要让子组件的 `watch` 持续监听某个属性，可以通过将 `watch` 选项设置为一个函数，并在函数中返回一个 `watchEffect` 函数来实现。具体实现方式如下：

export default {
  props: ['value'],
  watch: function() {
    return {
      value: () => {
        // 这里写需要执行的代码
      }
    }
  }
}

这样就能够实现子组件持续监听 `value` 属性的变化了。