需要监听isVisable.value，根据视频上监听isVisable是无法触发watch回调函数的。

// useScrollLock是vueuse中的一个方法，用于锁定页面的滚动
import { useScrollLock, useVModel } from ‘@vueuse/core’
// modelValue是父组件通过v-model传递给子组件的属性，这里使用defineProps定义
const props = defineProps({
modelValue: {
type: Boolean,
required: true
}
})

// 通过useVModel方法将props中的modelValue属性和update:modelValue事件绑定到isVisable上，当isVisable改变时，会自动触发update:modelValue事件
const isVisable = useVModel(props)

// 获取指定元素的滚动条是否锁定，返回的是一个响应式数据
const isLocked = useScrollLock(document.body)
// 当 isVisable 为true时锁定页面的滚动
watch(
() => isVisable.value,
(val) => {
isLocked.value = val
},
{
immediate: true
}
)