1. 使用监听 addEventListener

let scroll = ref(null)
const datas = reactive({
  isScrollTop: 0,
  scrollHeight: 0
})
onMounted(() => {
  document
    .querySelector('.msgbubble-warp')
    .addEventListener('scroll', handleScroll)
})
onBeforeUnmount(() => {
  document
    .querySelector('.msgbubble-warp')
    .removeEventListener('scroll', handleScroll)
})
function handleScroll() {
  datas.isScrollTop = scroll.value.scrollTop
  datas.scrollHeight = scroll.value.scrollHeight
  // console.log(datas,'datas')
}

2. 直接使用@scroll

<div @scroll.passive="onscrollChatList($event)"/>

3. 节流

import { throttle } from 'lodash'

const onDrag = throttle(function (e: MouseEvent) {
  scalable.value &&
    (scalable.value.style.width = startWidth + e.clientX - startX + 'px')
}, 20)

4. 防抖

import { debounce } from 'lodash'

function resize() {
  domWidth.value = document.body.clientWidth
}

onMounted(() => {
  window.addEventListener('resize', debounce(resize, 80))
})

节流

export const trottle = (callback, wait) => {
  let last = Date.now()
  return function (...args) {
    if (Date.now() - last > wait) {
      callback.call(this, ...args)
      last = Date.now()
    }
  }
}

let wheelScrollHanlder = trottle(wheelScrollHanlder, 20)

function wheelScrollHanlder() {}

5. lodash 的防抖节流

5.1. 防抖

import { debounce } from 'lodash'
import { throttle } from 'lodash'

let sendMsgBefor = debounce(sendMsgHander, 350)
// let sendMsgBefor = throttle(sendMsgHander, 350)
function sendMsgHander() {}

5.2. 节流

import { throttle } from 'lodash'

const handleScroll = throttle(() => {

},100)

onMounted(() => {
// 错误写法，离开页面也会一直监听
// window.addEventListener('scroll', \_.throttle(handleScroll,30), true)
window.addEventListener('scroll', handleScroll, true)
})

onBeforeUnmount(() => {
window.removeEventListener('scroll', handleScroll, true)
})

true 这个参数可有可无，默认就是 true