VueUse是什么

VueUse 是一个基于Composition API(组合API)的实用函数集合

安装

官网：https://vueuse.org/

npm i @vueuse/core@5.3.0 这里指定了版本号

useWindowScroll方法

作用：使用窗口滚动，监听窗口的滚动距离，可以实现顶部吸顶效果

用法

//引入方法
import { useWindowScroll } from '@vueuse/core'
//调用方法，返回是x：横向距离,y:纵向距离
const { x, y } = useWindowScroll()
//返回出去，模板中使用
return {x,y}

useIntersectionObserver方法

作用：检测目标元素的可见性，监听进入可视区域行为，可用于数据懒加载

用法

//引入方法
import { ref } from 'vue'
import { useIntersectionObserver } from '@vueuse/core'
//模板中，绑定目标元素
<div ref="target">
  <h1>Hello world</h1>
</div>
setup(
	const target = ref(null)
    const { stop } = useIntersectionObserver(
// 1、参数一target表示被监听的DOM元素
// 2、参数二是回调函数，用于通知监听的动作（回调函数的第一个形参
//	isIntersecting表示被监听的元素已经进入了可视区）
// 3.stop 是停止观察是否进入或移出可视区域的行为
      target,//第一个参数是目标元素
      ([{ isIntersecting }]) => {
        //如果isIntersecting为true，执行函数
        //stop()暂停监听可视区
      },
    )

    return {
      target,
    }
)

useVModel方法

作用：工具函数可实现双向绑定

用法：

import { useVModel } from '@vueuse/core'

export default {
  setup(props, { emit }) {
  //data:是需要改变的值
    const data = useVModel(props, 'data', emit)

    console.log(data.value) // props.data
    data.value = 'foo' // emit('update:data', 'foo')
  },
}