@vueuse/core

@vueuse/core 是一个组合式API的集合，用于在Vue 3中实现常用的复用逻辑1。它提供了一系列的响应式函数和组合式API，帮助开发者更方便地处理常见的交互逻辑和DOM事件。以下是一些使用@vueuse/core的示例1：

  1. 安装 ：
    yarn add @vueuse/core@5.3.0
    # 或者
    npm install @vueuse/core@5.3.0
    ```

2. **使用`useWindowScroll`** <b class="card40_249__sup_a7f6" data-sup="sup">1</b>：

```javascript
    import { useWindowScroll } from '@vueuse/core'；

    export default {
      setup() {
        const { y } = useWindowScroll()；
        return { y }；
      }
    }；
    ```

3. **使用`useIntersectionObserver`** <b class="card40_249__sup_a7f6" data-sup="sup">2</b>：

```javascript
    import { useIntersectionObserver } from '@vueuse/core'；

    export default {
      setup() {
        const target = ref(null)；
        const isVisible = ref(false)；
        const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
          isVisible.value = isIntersecting；
        })；

        // 停止监听
        // stop()；

        return { isVisible }；
      }
    }；
    ```

4. **在模板中使用** ：

```html
    <template>
      <div ref="target" v-show="isVisible">
        <!-- 内容 -->
      </div>
    </template>

    <script>
    import { ref, onMounted } from 'vue'；
    import { useIntersectionObserver } from '@vueuse/core'；

    export default {
      setup() {
        const target = ref(null)；
        const isVisible = ref(false)；
        const { stop } = useIntersectionObserver(target, ([{ isIntersecting }]) => {
          isVisible.value = isIntersecting；
        })；

        onMounted(() => {
          // 组件挂载后开始监听
        })；

        // 停止监听
        // stop()；

        return { isVisible }；
      }
    }；
    </script>
    ```

这些示例展示了如何使用`@vueuse/core`中的不同函数来处理窗口滚动和元素可见性等常见交互逻辑。通过组合这些API，可以更高效地构建响应式和交互式的Vue应用。
Top
×
×