<a data-v="3"></a>
jquery data方法的運行機制： 第一次查找dom，使用attributes獲取到dom節點值，並將其值存到緩存里，第二次操作的時候，還是先找到dom，但是這次取值是直接從緩存讀了，少了一步對dom的操作
attr()方法每次都要操作dom，性能上差點兒
$('a').data('v')取到的值是頁面初次加載的緩存值，以后如何更改，在頁面上都不會改變，但緩存值會變，可以傳給i/o請求使用
document.getElementsByTagName('a').attr('data-v'),如果頁面響應事件ain改變了該值，其頁面展示值也會改變，因為是一直操作的dom，性能上低於前者
以下是盜圖原文
代碼展示地https://github.com/jquery/jquery/blob/master/src/data.js#L77-L165
其實是這樣的，當我們執行例如這樣的語句時 $("#id").data("test"); (簡化后的過程)
第一步: jQuery 會獲取到 $("#id") 元素，對吧、
第二步: 執行到 data方法 的時候，他會通過 attributes 取我們要的對應值。
第三步: 返回結果給我們，然后 jQuery 把值緩存到內部對象里
第一次取的時候，我們可以得到的 undefined，字符串，數字或者解析后的json。
那有人會說這個和 attr 有什么區別呢？
當我們第二次執行 $("#id").data("test"); 的時候：
第一步: jQuery 會獲取到 $("#id") 元素，和上面一樣。
第二步: 執行到 data方法 的時候，從 jQuery 的緩存中取值
第三步: 返回結果給我們
發現第二步不同了，對吧，為什么不是從 attributes 取值，而是從緩存中取呢？
緩存其實是js的對象，簡單說就類似 var cache = {}; jQuery 在第一次取值之后就會保存到這個緩存對象中，這樣我們再次操作的時候就非常快了、
往往性能的損耗都是在 dom 操作上，所以避免重復操作 dom 是非常必要的。
到這，也能看出他和 attr 最大的區別了，比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", "123"); 執行后依然是 data-test="hehe"
$("#id").attr("data-test", "123"); 執行后會是 data-test="123"
那么我們要給一個元素賦值值，或者對象的時候他們有什么區別呢？比如 <div id="id" data-test="hehe"></div>
$("#id").data("test", {str: "hehe"}); 會把 {str: "hehe"} 賦值給 緩存，元素節點上依然是 data-test="hehe"
$("#id").attr("data-test", {str: "hehe"}); 執行后會是 data-test="[object Object]"
這個應該也有不少人遇到，至少群里有不少人問過這個問題。