[前端][vue] DOM 操作时机

需要理解 Vue 生命周期。

我们常用的生命周期有 created 和 mounted，这俩个的需要区分清楚。

created 时，DOM 树是未挂载的，在 created 钩子函数内是无法进行 DOM 操作的，例如初始化 swiper!

我们可以在 created 中进行接口的请求，不要做 DOM 操作。

在 mounted 钩子函数内，才可以进行 DOM 操作。

Vue.nextTick(callback)

Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。

如果同一个 watcher 被多次触发，只会被推入到队列中一次。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作

new Vue({
    // ...
    methods: {
        // ...
        example: function () {
            // 修改数据
            this.message = 'changed';
            // DOM 还没有更新
            this.$nextTick(function () {
                // DOM 现在更新了
                // `this` 绑定到当前实例
                this.doSomethingElse();
            });
        }
    }
});