Vue组合式函数中如何正确追踪prevValue？解决值始终为null问题

你遇到的prevVal始终为null的核心原因是Vue模板引用（template ref）的更新逻辑：当DOM元素被替换（比如通过v-if切换、列表更新等）时，Vue会先将elRef.value设为null（对应旧元素卸载），然后再将其赋值为新的DOM元素（对应新元素挂载）。这意味着watch会触发两次：

• 第一次：newVal = null，prevVal = 旧DOM元素
• 第二次：newVal = 新DOM元素，prevVal = null

你可能只关注到了第二次触发，所以误以为prevVal一直是null。

解决方法 #

要正确处理旧元素的事件监听销毁和新元素的监听绑定，不需要依赖watch的prevVal参数，直接维护一个变量存储上一次的元素即可：

const { ref, watch } = window.Vue;

function useElementListener(elRef) {
    let prevElement = null;

    watch(elRef, (currentElement) => {
        // 销毁旧元素的事件监听
        if (prevElement) {
            console.log('移除旧元素监听', prevElement);
            // 示例：移除click监听
            prevElement.removeEventListener('click', handleClick);
        }

        // 给新元素绑定事件监听
        if (currentElement) {
            console.log('添加新元素监听', currentElement);
            // 示例：添加click监听
            currentElement.addEventListener('click', handleClick);
        }

        // 更新存储的上一次元素
        prevElement = currentElement;
    });

    // 示例事件处理函数
    function handleClick() {
        console.log('元素被点击');
    }
}

为什么你的两种写法无效？ #

1. useComposable1：watch的第二次触发（新元素挂载）时prevVal是null，因为中间经过了elRef.value = null的步骤，而你可能没留意到第一次触发（旧元素卸载）时prevVal其实是旧元素。
2. useComposable2：当elRef.value变为null时，回调会把prevVal.value设为null；之后新元素挂载时，打印的prevVal.value就是null，然后才会更新为新元素，所以你看到的始终是null。

内容的提问来源于stack exchange，提问作者nth-chile