Vue2中如何在组件每次显示时调用组件方法？

Vue2本身没有onShow生命周期钩子，要实现组件每次显示时执行指定方法，可根据组件的使用场景选择以下几种方案：

1. 结合keep-alive使用activated钩子 #

如果你的组件需要保留缓存状态（比如切换回来不想重新渲染），可以用<keep-alive>包裹组件。此时每次组件被激活显示时，会触发activated钩子函数，直接在这个钩子内调用目标方法即可。

示例代码：

<template>
  <div>这是我的缓存组件</div>
</template>

<script>
export default {
  activated() {
    // 组件每次显示时执行该方法
    this.handleShow()
  },
  methods: {
    handleShow() {
      console.log('组件显示了，执行对应的业务逻辑')
    }
  }
}
</script>

注意：只有组件被包裹在<keep-alive>中时，activated和deactivated钩子才会生效，未被缓存的组件不会触发这两个钩子。

2. 路由组件监听路由变化 #

如果你的组件是路由视图中的页面组件，可以通过监听路由变化或使用路由守卫来触发方法：

方法A：监听$route对象 #

<script>
export default {
  watch: {
    $route(to, from) {
      // 判断当前路由是否为当前组件对应的路由，避免其他路由切换时误触发
      if (to.name === 'TargetRouteName') {
        this.handleShow()
      }
    }
  },
  methods: {
    handleShow() {
      console.log('路由切换到当前组件，执行操作')
    }
  }
}
</script>

方法B：使用路由守卫 #

<script>
export default {
  // 首次进入当前路由时触发
  beforeRouteEnter(to, from, next) {
    next(vm => {
      // vm是当前组件实例，进入路由时执行方法
      vm.handleShow()
    })
  },
  // 同一路由参数更新时触发（比如从 /user/1 切换到 /user/2）
  beforeRouteUpdate(to, from, next) {
    this.handleShow()
    next()
  },
  methods: {
    handleShow() {
      console.log('组件显示/路由更新，执行操作')
    }
  }
}
</script>

3. 父组件控制显示状态，子组件监听状态变化 #

如果组件是在父组件内通过v-show或v-if控制显示隐藏的，可以由父组件传递显示状态给子组件，子组件监听该状态变化，当状态变为true时执行方法。

父组件代码： #

<template>
  <div>
    <button @click="toggleComponent">切换组件显示</button>
    <ChildComponent :is-visible="isComponentVisible" />
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue'
export default {
  components: { ChildComponent },
  data() {
    return {
      isComponentVisible: false
    }
  },
  methods: {
    toggleComponent() {
      this.isComponentVisible = !this.isComponentVisible
    }
  }
}
</script>

子组件代码： #

<template>
  <div v-show="isVisible">子组件内容</div>
</template>

<script>
export default {
  props: {
    isVisible: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    isVisible(newVal) {
      if (newVal) {
        // 组件被显示时执行方法
        this.handleShow()
      }
    }
  },
  methods: {
    handleShow() {
      console.log('子组件显示了，执行对应操作')
    }
  }
}
</script>

内容的提问来源于stack exchange，提问作者cmal