监听dom的ref失效

[fishcy]

请问为什么使用ref获取dom节点后，用watch监听ref不生效

[liulinboyi]

Tips:
watch's first argument is a getter like () => x.value, if you use reactive or ref will also be changed to a getter too.

You can use like this: PlayFround

[fishcy]

我是这样用的

const _slider = ref<HTMLElement | null>()

watch(
    () => _slider.value,
    () => {
        console.log(222)
        if (_slider.value) {
            centerX.value = _slider.value?.getBoundingClientRect().width
            centerY.value = _slider.value?.getBoundingClientRect().height
            console.log(centerX.value, centerY.value)
        }
    }
)

[liulinboyi]

我是这样用的

const _slider = ref<HTMLElement | null>()

watch(
    () => _slider.value,
    () => {
        console.log(222)
        if (_slider.value) {
            centerX.value = _slider.value?.getBoundingClientRect().width
            centerY.value = _slider.value?.getBoundingClientRect().height
            console.log(centerX.value, centerY.value)
        }
    }
)

The watch only can trigger the callback, when in the getter's reactive value is changed. The DOM change watch can't trigger the callback.I think you should get the DOM and then use the follow Browser API:

https://developer.mozilla.org/zh-CN/docs/Web/API/ResizeObserver

https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

https://developer.mozilla.org/zh-CN/docs/Web/API/Intersection_Observer_API

https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserver

END

[fishcy]

Thanks