做一个网页聊天室页面，功能需求是：当有新消息出现在聊天室页面时，控制页面滚动条滚动到页面底部；

聊天室页面代码如下：

data中的消息列表；

        messageList: [{
            Character: "0", //客服
            message: "你好,有什么需要我帮忙的吗？"
          },
          {
            character: "1", //顾客
            message: "你好,我想咨询一下...."
          }
        ],

每当用户发出新消息时，就会想消息列表内push一个消息对象；

     sendMessage() {
        if (this.input == '') {
          Toast('发送消息不能为空');
        } else {
          var messageObj = {
            character: "1",
            message: this.input
          };
          this.messageList.push(messageObj);
          this.input = '';
        }
      }

页面会将消息列表渲染出来

聊天室页面如下：

刚开始控制滚动条的实现方法是监听消息列表messageList的变化，当messageList有变化时，就控制页面滚动到底部，代码如下：

    watch:{
        messageList:()=>{
            let ele = document.getElementById('message-list');
            ele.scrollTop = ele.scrollHeight;
        }
    },

测试后发现页面也会发生改变，但总是定位到倒数第二条消息；原来是因为MessageList 数据改变之后，DOM 并没有立即发生变化，所以 ele.scrollHeight还是上一次 DOM更新之后的值。

后来做的改进方法是将滚动放在页面更新之后；将方法放在了Vue生命周期中的updated()中；代码如下

    updated(){
          let ele = document.getElementById('message-list');
          ele.scrollTop = ele.scrollHeight;
    },