mount() 挂钩中的 Vue $nextTick 无法按预期工作答案

【问题标题】：Vue $nextTick in mounted() hook doesn't work as expectedmount() 挂钩中的 Vue $nextTick 无法按预期工作
【发布时间】：2021-11-03 00:40:39
【问题描述】：

我正在尝试对挂载钩子中的元素应用一些内联样式，作为过渡的起点。

  mounted() {
    this.styles = {
      backgroundColor: 'silver'
    };

在那之后，在下一个刻度上，我想添加一组新样式，并让过渡发生

    this.$nextTick(() => {
      this.styles = {
        backgroundColor: 'gold'
      }
    });
  }

这并不像我期望的那样工作，它会立即使用第二种样式呈现元素。

如果我将$nextTick 替换为setTimeout，它将按预期工作。

我哪里错了？必须有一种方法可以在不依赖超时的情况下实现这一点。

PS 我知道我可以用 Vue 过渡来做到这一点，但在实际项目中，要应用的样式更复杂并且是通过程序计算的，所以我宁愿在 js 中做，而不是在 css 中做

【问题讨论】：

你说过它可以使用setTimeout。在您的示例中，我可以看到您确实在超时中等待了 100 毫秒。 $nextTick 最后比那个短。我知道这不是您所期望的，但这就是它的工作原理。
setTimeout(() => { this.styles = { backgroundColor: 'pink' } }, 0);你可以用 0 时间做 Timeout 以获得你想要的效果。应该和nextTick一样，因为某些原因不起作用。
正如我已经回答的那样，您需要等待下一个event loop。 $nextTick 不这样做????

【解决方案1】：

你说过它可以使用setTimeout。在您的示例中，我可以看到您确实在超时中等待了 100 毫秒。 $nextTick 最后更短。它不会等待下一个event loop。

我知道这不是您所期望的，但这就是它的工作方式。您需要等待另一个event loop。即使将timeout 与0 一起使用也可以解决问题。

setTimeout(() => {
    this.styles = {
    backgroundColor: 'pink'
  }
}, 0);

【讨论】：

嗯。你是对的，它确实适用于超时0。我猜docs 有点误导，对Use it immediately after you've changed some data to wait for the DOM update 说。实际上（如this 回答澄清）nextTick 发生在 Vue.js 更新虚拟 DOM 之后，但在浏览器在页面上呈现该更改之前。现在这就解释了被质疑的行为

【解决方案2】：

在您的情况下，两次渲染之间几乎没有延迟。要查看silver 将如何变成gold，您可以致电setTimeout：

    this.$nextTick(() => {
      setTimeout(() => {
      this.styles = {
        backgroundColor: 'gold'
      }
    }, 1000)
    });

我不确定您是否应该将其用作现成的解决方案，因为使用 CSS 过渡效果更好。也许您不仅需要更改样式，还需要添加一些类以在样式计算完成后打开 CSS 过渡。

【讨论】：