挂载() 钩子中的 Vue $nextTick无法按预期工作

Question

我正在尝试将一些内联样式应用于mounted hook中的元素，作为过渡的起始点。

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

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

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

这并没有像我期望的那样工作，它立即以第二种样式呈现元素。

如果我用setTimeout替换$nextTick，它会像预期的那样工作。

我错在哪里?必须有一种方法来实现这一点，而不依赖于超时。

我在这里重现了这个问题

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

Answer 1

您说过它使用setTimeout工作。在你的例子中，我可以看到你在超时中等待了100毫秒。$nextTick持续时间比那短。它不等待下一个event loop。

我知道这不是你所期望的，但这就是它的工作原理。您需要等待另一个event loop。即使使用timeout和0也能达到同样的效果。

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

Answer 2

在你的情况下，两次渲染之间几乎没有延迟。要查看silver如何变成gold，可以调用setTimeout:

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

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