jquery 的 data 和 attr

曾以为attr和data效果是一样的，只是attr需要多写一点代码量。后来在开发中发现他们并不相同。先写两个div体验一下:

<div id="test1">test1</div>
<div id="test2">test2</div>
<script>
    // 赋值
    $("#test1").attr("data-test1", "test1")
    $("#test2").data("test2", "test2")
    // 取值
    console.log($("#test1").attr("data-test1")) // test1
    console.log($("#test2").data("test2")) // test2
    // 交换取值
    console.log($("#test1").data("test1")) // test1
    console.log($("#test2").attr("data-test2")) // undefined
</script>

在浏览器上Elements显示为

<div id="test1" data-test1="test1">test1</div>
<div id="test2">test2</div>

那attr 更改了#test1的值后用data再获取会如何

$("#test1").attr("data-test1", "test111")
console.log($("#test1").data("test1")) // test1

更改后在浏览器上Elements显示为

<div id="test1" data-test1="test111">test1</div>
<div id="test2">test2</div>

原来 jquery 的 data 是一种缓存机制，是一种将缓存附加到选择的对象上方法。用 data 取值时，它先获取到 DOM 节点值，并将其值存到缓存里，在以后查找时，它找到 DOM 后直接从缓存读取。所以即使attr改变了元素的值，但是缓存里的值没变，读取的结果没变。
attr 方法直接对DOM进行操作，在元素里能够直接看到。
所以应避免混合用data和attr。
在性能上，建议使用data，因为它能够减少对DOM的操作。