缓慢的 Vue 样式绑定答案

【问题标题】：Slow Vue style binding缓慢的 Vue 样式绑定
【发布时间】：2018-07-14 11:40:51
【问题描述】：

Vue 在动态样式绑定方面似乎很慢（与 jQuery 相比）：

我有一个带有overflow-x 的容器，也是一个比它的父容器更宽的内部容器。还有两个带有absolute 位置的按钮。

第一个按钮style属性由Vue渲染
第二个按钮style属性由jQuery渲染

在容器滚动第一个按钮style 期间，更新非常慢。 jQuery 的速度要快得多。

有没有办法提高它的渲染速度？

代码如下：

new Vue({
  el: "#app",
  data: {
    left_offset : 0,
    $b2 : null
  },
  computed:{
    _left_offset_style(){
        return `left:${this.left_offset}px`;
    }
  },
  mounted(){
    this.$b2 =  $(this.$el).find('.b2');
  },
  methods: {
    scrollMe(e){
        this.left_offset = parseInt($(e.target).scrollLeft());
        this.$b2.css({left:`${this.left_offset}px`} );      
    }
  }
})

.container {
  width: 400px;
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
  position: relative;
}

.inner-container{
  width: 800px;
  height: 200px;
}

button{
  position: absolute;
  width: 100px;
}

.b2{
  top: 40px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="app">
  <div class="container" @scroll="scrollMe">
    <button :style="_left_offset_style" class="b1">b1</button>
    <button class="b2">b2</button>
    <div class="inner-container"></div>    
  </div>
</div>

【问题讨论】：

标签： html css performance vue.js vuejs2

【解决方案1】：

有没有办法提高渲染速度？

你根本不需要 jquery。只需在b1 按钮上添加一个ref 并使用它来根据滚动监听器中的scrollLeft 更改left CSS 属性

html

<div id="app">
  <div class="container" @scroll="scrollMe">
    <button ref="b1" class="b1">b1</button>
    <div class="inner-container"></div>
  </div>
</div>

脚本

new Vue({
  el: "#app",
  methods: {
    scrollMe(e) {
      console.log("scroll left", e.target.scrollLeft);
      this.$refs.b1.style.left = e.target.scrollLeft + "px";
    }
  }
});

这里是updated fiddle

【讨论】：

【解决方案2】：

如果我理解您想要实现的效果（添加一些悬停在可滚动容器上的固定按钮），那么您根本不需要 Vue 或 JQuery 来实现该效果，您可以完全使用 HTML & CSS。

.container {
  position: relative;
}

button {
  width: 100px;
  height: 20px;
  position: absolute;
}

.btn-1 {
  top: 0;
  left: 0;
}

.btn-2 {
  top: 30px;
  left: 0;
}

.scroll-container {
  width: 400px;
  height: 200px;
  overflow-x: auto;
  overflow-y: hidden;
}

.scrollable-content {
  width: 800px;
  height: 200px;
}

<div class="container">
  <button class="btn-1">b1</button>
  <button class="btn-2">b2</button>
  <div class="scroll-container">
    <div class="scrollable-content"></div>    
  </div>
</div>

另外，仅供参考，Vue 批量更改并循环执行 DOM 更新，文档：https://vuejs.org/v2/api/#Vue-nextTick

【讨论】：