vue中nextTick与JS中setTimeout的用法

Question

问题描述

在vue中，我有以下模板：

<i class="bar" :style="style">
    <i class="dot"></i>
</i>

然后js中的代码如下：

props: {
        progress: {
            type: Number,
            default: function () {
                return 0;
            }
        },
        userInfo: {
            type: Object,
            default: function () {
                return {};
            }
        }
    },
    mounted() {
        let self = this;
        self.$nextTick(() => {
            self.width = self.progress;
        })
        // setTimeout(() => {
        //     this.width = this.progress;
        // })

    },
    computed: {
        style() {
            return {
                width: this.width + '%',
            }
        }
    },

bar的样式有一个宽度变化的动效：

transition: width 0.5s ease;

为什么我使用nextTick没有动效，而使用setTimeout有动效呢？

Answer 1

讲的挺详细

Answer 2

nextTick：将回调延迟到下次DOM更新循环之后执行
setTimeout：将回调延迟到指定时间之后执行
两者回调执行的前提条件不相同