jQuery .removeData()未按预期工作，请求解释该行为

这确实是个容易踩坑的点，我来拆解一下.data()和.removeData()背后的工作逻辑：

jQuery的.data()并不是每次调用都直接读取DOM上的data-*属性，它依赖一套内部缓存机制，具体流程是：

1. 当你第一次调用$('.outer').data()（或指定key的.data('hello')）时，jQuery会把DOM上所有data-*属性读取出来，存入内部缓存（同时会做驼峰命名转换，比如data-hello对应缓存里的hello），并且在内部标记这些key已经被加载过。
2. 后续再调用.data('hello')时，jQuery会直接从缓存取数据，完全不会再去读取DOM上的data-hello属性——哪怕你用.attr()修改了属性值，除非你手动调用.data('hello', newValue)更新缓存。
3. 当你调用.removeData('hello')时，它只会删除缓存里的hello条目，但关键是：jQuery会保留这个key的「已加载标记」。这意味着后续再调用.data('hello')时，jQuery会认为你已经主动移除了这个数据，不会再尝试重新从DOM属性里加载它。

我们可以修改你的代码来直观验证这个机制：

<div class="outer" data-hello="1">hello</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
// 第一次调用.data()，加载所有data-*到缓存
console.log('第一次.data()结果:', $('.outer').data()); 
// 移除缓存里的hello
$('.outer').removeData('hello'); 
// 此时缓存无hello，且jQuery不会重新读属性
console.log('removeData后.data()结果:', $('.outer').data()); 
// 属性确实还存在于DOM上
console.log('直接读attr结果:', $('.outer').attr('data-hello')); 

// 测试另一种场景：先removeData再首次调用.data()
const $newOuter = $('<div data-hello="2"></div>');
$newOuter.removeData('hello');
// 此时是首次调用.data()，依然会读取属性值
console.log('先removeData再.data()结果:', $newOuter.data()); 
</script>

运行后你会发现：最后那个$newOuter因为在调用.removeData('hello')前从未加载过缓存，所以后续的.data()还是会读取data-hello属性的值，这也对应了官方文档描述的场景。

如果想在removeData之后让.data()重新获取DOM属性的值，有两种可行方式：

• 手动同步：用.attr('data-hello')读取属性值，再用.data('hello', 读取到的值)写入缓存
• 彻底清除内部标记：调用.removeData()（不带参数清空所有缓存），再调用.removeAttr(jQuery.expando)删除jQuery的内部标记属性（注意：这会清除该元素所有的jQuery缓存数据，需谨慎使用）

内容的提问来源于stack exchange，提问作者ivanibash