vue 内容增加滚动条自动定位至底部

this.$nextTick(() => {
        document.body.scrollTop = document.body.scrollHeight;
        console.log(document.body.scrollTop);
});

 数据改变之后，DOM 并没有立即发生变化，所以 document.body.scrollTop 还是上一次 DOM更新之后的值。

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用。

再次修改之后的代码如下，可以实现自动定位到对话页面的底部，但是还有一个小问题，就是输入新的对话信息之后会出现闪屏的现象，可以通过设置延时来解决。