使用Vue3语法实现当页面滚动出去100px时A盒子显示

好的，我可以为您提供一个简单的实现方法。

首先，您需要在页面中引入Vue3的库文件。

然后，在您的Vue组件中，可以使用`ref`来获取A盒子的DOM元素，并使用`v-show`指令来控制其显示与隐藏。

最后，在`mounted`生命周期函数中，可以使用`window.addEventListener`方法来监听页面滚动事件，当滚动超过100px时，将A盒子的`v-show`属性设置为`true`，否则设置为`false`。

下面是一个简单的示例代码：

<template>
  <div>
    <div ref="boxA" v-show="showBoxA">A盒子</div>
    <div style="height: 2000px"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const boxA = ref(null)
    const showBoxA = ref(false)

    onMounted(() => {
      window.addEventListener('scroll', handleScroll)
    })

    const handleScroll = () => {
      const scrollTop = document.documentElement.scrollTop
      if (scrollTop > 100) {
        showBoxA.value = true
      } else {
        showBoxA.value = false
      }
    }

    return {
      boxA,
      showBoxA,
    }
  },
}
</script>

在上面的示例代码中，我们使用了`ref`来获取A盒子的DOM元素，并使用`v-show`指令来控制其显示与隐藏。在`setup`函数中，我们使用`onMounted`钩子来注册滚动事件的监听函数，并在滚动事件中更新`showBoxA`的值，以控制A盒子的显示与隐藏。