1

我看到一些我不理解的 Vue 转换行为。通过展示一个例子会更容易解释：

给定以下组件：

<transition :name="transitionName">
    <div v-if="showMe">Hey</div>
</transition>
<button @click="transitionName='slide-left'; showMe = false">Left</button>

以下情况属实：

  • 过渡名称有适当的 css 类，.slide-left它们.slide-right的名称所暗示的。
  • 的初始状态transitionName是slide-right
  • 的初始状态showMe为真

单击按钮时，我希望 div向左滑动。但是，它向右滑动。

此处提供了完整的可重现性：

var demo = new Vue({
  el: '#demo',

  data: {
    showMe: true,
    transitionName: 'slide-right'
  }
});
#demo {
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 20%;
  margin: 100px auto;
  text-align: center;
}

.buttons {
  display: flex;
  justify-content: space-between;
}

.slide-right-enter-active,
.slide-left-enter-active,
.slide-right-leave-active,
.slide-left-leave-active {
  transition: all 1s ease-in-out;
}

.slide-left-enter,
.slide-left-leave-to {
  transform: translateX(-100%);
}

.slide-right-enter,
.slide-right-leave-to {
  transform: translateX(100%);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="demo">
  <transition :name="transitionName">
    <div v-if="showMe">Hey</div>
  </transition>
  <div class="buttons">
    <button @click="transitionName='slide-left'; showMe = false">left</button>
    <button @click="transitionName='slide-right'; showMe = !showMe">right</button>
  </div>
</div>

它包含“左”和“右”按钮，但无论您单击哪个，组件都会“向右”滑动。

我可以通过将按钮的回调更改为此来修复它：

this.transitionName = 'slide-left';
Vue.nextTick(() => {
    this.showMe = false;
});

但我想知道为什么nextTick这里有必要，以及是否有更好的方法来解决一般问题。

4

1 回答 1

0

这是因为 Vue 的更新周期。它将所有更新排队并同时“刷新”它们，因此它可以评估页面的哪些部分需要更改并仅修补这些更改。当您使用时，Vue.nextTick您实际上是在告诉 Vue 等到下一个更新周期再设置this.showMe = false.

文档比我解释得更好：

...Vue 异步执行 DOM 更新。每当观察到数据更改时，它将打开一个队列并缓冲在同一事件循环中发生的所有数据更改。如果同一个 watcher 被多次触发，它只会被推入队列一次。这种缓冲的重复数据删除对于避免不必要的计算和 DOM 操作很重要。然后，在下一个事件循环“tick”中，Vue 刷新队列并执行实际的（已经去重复的）工作......

...例如，当您设置 时vm.someData = 'new value'，组件不会立即重新渲染。当队列被刷新时，它将在下一个“滴答”中更新。大多数时候我们不需要关心这个，但是当你想做一些依赖于更新后 DOM 状态的事情时，这可能会很棘手......为了等到 Vue.js 完成更新 DOM数据更改后，您可以在数据更改Vue.nextTick(callback)后立即使用。DOM 更新后将调用回调。

于 2020-09-30T08:19:20.063 回答