Question

Vue.js在动态样式绑定中似乎非常慢（与jQuery相比）：

我有一个带有overflow-x的容器，该容器也比其父容器宽。还有两个位置为absolute的按钮。

第一个按钮style属性由Vue呈现
第二个按钮style属性由jQuery呈现

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

是否有某种方法可以提高其渲染速度？

这是Vue组件代码：

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`} );  // with jQuery      
    } 
  }
})

jsFiddle

Vue版本：2.5.16

Answer 1

如果我了解您要实现的效果（添加一些悬停在可滚动容器上的固定按钮），则根本不需要Vue或JQuery即可实现此效果，您可以完全使用HTML和CSS。

更新的小提琴：https://jsfiddle.net/w47Lz9re/9/

HTML

<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>

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;
}

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

Answer 2

是否有某种方法可以提高其渲染速度？

您根本不需要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

慢Vue样式绑定

2 个答案: