Question

在html中：

<div @mouseenter='setDisplay(0)' @mouseleave='setHide(0)'
  <div
    class="innerHolder"
    v-show='innerDisplay[0]'
    >
    aaa
  </div>
</div>

我想使用v-show和array来控制div是否显示。并在数据中：

innerDisplay: [false,flase,false]

然后输入方法：

setDisplay(index){
  this.innerDisplay[index] = true;
},
setHide(index){
  this.innerDisplayArray[index] = false;
},

奇怪，它可以工作，但是非常慢。此“慢”表示当我的鼠标进入父div大约5秒钟时，子div将显示。但是，如果我使用此方法：

v-show:'innerDisplay'

以及我使用的数据：

innerDisplay: false;

和mouseenter事件仅更改了布尔数组而不是布尔数组，子div将在鼠标移动一秒钟后立即显示

数组是否使方法变慢？

Answer 1

问题是change detection。

由于JavaScript的限制，Vue无法检测以下内容   更改为数组：


直接用索引设置项目时，例如vm.items [indexOfItem] = newValue

您需要使用<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>：

$set

new Vue({
  el: '#app',
  data: {
    innerDisplay: [false, false, false]
  },
  methods: {
    setDisplay(index) {
      this.$set(this.innerDisplay, index, true);
    },
    setHide(index) {
      this.$set(this.innerDisplay, index, false);
    }
  }
});

Vue中的数组方法非常慢？

1 个答案: