Vue实现简单的回到顶部按钮

<template>
  <div>
    <button @click="scrollToTop" v-show="showButton">
      <img src="path/to/top-arrow.png" alt="回到顶部">
    </button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      showButton: false,
    };
  },
  methods: {
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth',
      });
    },
  },
  mounted() {
    window.addEventListener('scroll', () => {
      this.showButton = window.pageYOffset > 200;
    });
  },
  beforeDestroy() {
    window.removeEventListener('scroll', () => {});
  },
};
</script>

这段代码定义了一个Vue组件，其中包含了一个图像按钮，当用户滚动页面超过200px时显示该按钮，点击按钮将页面滚动到顶部。同时，它正确地使用了window.addEventListener和window.removeEventListener来管理事件监听器的生命周期。