Vue实现聊天框实时展示新消息

一、问题

实现和微信QQ聊天相同的功能，打开聊天框或收到新消息，都能实时展示新消息

二、解决办法

使用异步处理setTimeout函数获取最新的scrollHeight
代码如下（示例）：

scrollToBottom () {
  this.$nextTick(() => {
    const container = document.getElementById('chat')
      // console.log(container.scrollTop)
      // console.log(container.scrollHeight) // 加上超出的部分一共是1530
      container.scrollTop = container.scrollHeight
      console.log(`点击了添加按钮，更新时间：${new Date()},此时的div.scrollHeight是：${container.scrollHeight}`)
    })
  },
beforeUpdate () {
   const container = document.getElementById('chat')
   console.log(`我被更新Dom之前，更新时间：${new Date()},更新前的div.scrollHeight是：${container.scrollHeight}`)
   container.scrollTop = container.scrollHeight
}
// 添加消息函数
Add () {
  setTimeout(() => {
  	this.$parent.scrollToBottom()
  }, 100)
}
// 在进入页面时，需要显示最新消息
mounted: function () {
  this.getMsg()
    setTimeout(() => {
      this.beforeUpdate()
    }, 100)
  },

在使用Vue框架的时候，有时候需要在Vue在页面数据渲染完成之后调用方法，不然获取不到准确的数据，特别是在获取列表的高度的时候，由于数据没有加载完，获取不到准确的高度。因此采用定时器方法，可以实现在DOM渲染完后得到准确的高度。