Vue 中 data 更新后没有立即拿到最新数据的问题解决

遇到的问题：

1. 当因为断网或其他原因，数据停止更新，当网络恢复，数据重新刷新的时候，页面出现短暂的空白后重新显示了内容。（效果看起来像是页面重新刷新加载，短暂的空白是因为显示内容的数据刷新，但是数据没有立即被使用）

2. 在同一窗口，切换不同内容的时候，当切到某个页面时需要立即展示最新的内容（产生了滚动条），也就是需要滚动条置底。实际上切换到该页面时，往往内容滚动到中间部分。

原因：

1. DOM 的渲染是异步渲染
2. 由于异步渲染，导致 data 改变后，DOM 不会立即渲染，所以是无法立刻拿到最新的数据的

解决：利用 $nextTick 的特性，它会在 DOM 渲染之后被触发，执行它的回调函数。所以就可以把要立即渲染的步骤写进 $nextTick 的回调里。

用法：

data() {
    return {
        list: [5, 4, 3]
    }
}
methods: {
    addItem() {
        this.list.push(1);
        this.list.push(2);
​
        // 如果不加 $nextTick 只能获取到上次更新的数据
        this.$nextTick(() => {
            const ulEle = this.$refs.ulEle
            console.log(ulEle.childNodes.length)
        })
    }
}