Vue中DOM已更新，但读取data属性仍为初始值的原因？

jQuery的data()方法存在缓存机制：第一次调用$('#test5').data('range')时，它会读取DOM上的data-range属性值并缓存到内存中。后续再调用data('range')，只会返回缓存的初始值，不会主动同步DOM属性的更新——哪怕你在控制台能看到DOM上的data-range已经变了，data()还是拿旧的缓存值。

这里有三种可行的处理方式：

1. 直接读取DOM属性（最直接） #

改用jQuery的attr()方法，它会直接从DOM元素上读取最新的data-range属性值，不会依赖缓存：

this.options.vue.$on('xps-updated', function(){
  this.options.vue.$nextTick(function(){
    console.log($('#test5').attr('data-range')) // 能获取到更新后的值
  }.bind(this))
}.bind(this));

2. 手动更新jQuery的data缓存 #

如果你一定要用data()方法，可以在Vue更新DOM后，手动把新值同步到jQuery的缓存里：

this.options.vue.$on('xps-updated', function(){
  this.options.vue.$nextTick(function(){
    const $el = $('#test5');
    // 先读取最新的DOM属性值，再更新缓存
    const newRange = $el.attr('data-range');
    $el.data('range', newRange);
    console.log($el.data('range')); // 现在能拿到更新后的值
  }.bind(this))
}.bind(this));

3. 直接从Vue实例获取值（最符合Vue思想） #

既然是Vue应用，完全没必要绕去DOM上读值——直接从Vue实例的data中获取最新的height_min并拼接即可，这是最高效也最符合Vue数据驱动理念的方式：

this.options.vue.$on('xps-updated', function(){
  const rangeVal = this.options.vue.form.appearence.height_min + '/7';
  console.log(rangeVal); // 直接拿Vue数据，无需操作DOM
}.bind(this));

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