通過vue.js的監聽方法實現聊天室出現新消息時，滾動條自動滾動到底

　1. 一開始在ChatBot.vue文件中增加監聽函數，如果nowMessageList發生了變化，則動態修改滾動條到頂部的距離等於對話框<div id='dialogue'></div>的高度，但是發現 document.getElementById('dialogue').scrollTop 的值一直是0。

watch: {

    nowMessageList: function() {

        document.getElementById('dialogue').scrollTop = document.getElementById('dialogue').scrollHeight;

        console.log(document.getElementById('dialogue').scrollTop);//0

        });

    }

}

2、document.getElementById('dialogue').scrollTop 值一直是0的原因是，頁面沒有指定DOCTYPE。但是vue文件中的 template 不是標准的 HTML 文件，指定 DOCTYPE 也不起作用，所以這里需要使用 document.body.scrollTop 。但又出現了新的問題，頁面並沒有定位到對話框底部，而是定位到倒數第二條消息。

頁面具有 DTD（或者說指定了 DOCTYPE）時，使用 document.documentElement。 

頁面不具有 DTD（或者說沒有指定了 DOCTYPE）時，使用 document.body。 

watch: {

    nowMessageList: function() {

        document.body.scrollTop = document.body.scrollHeight;

        console.log(document.body.scrollTop);//會發生改變，但總是定位到倒數第二條消息

        });

    }

}

3、由於 nowMessageList 數據改變之后，DOM 並沒有立即發生變化，所以 document.body.scrollTop 還是上一次 DOM更新之后的值。

Vue 實現響應式並不是數據發生變化之后 DOM 立即變化，而是按一定的策略進行 DOM 的更新。$nextTick 是在下次 DOM 更新循環結束之后執行延遲回調，在修改數據之后使用。

再次修改之后的代碼如下，可以實現自動定位到對話頁面的底部，但是還有一個小問題，就是輸入新的對話信息之后會出現閃屏的現象，可以通過設置延時來解決。

watch: {

    nowMessageList: function() {

      this.$nextTick(() => {

        document.body.scrollTop = document.body.scrollHeight;

        console.log(document.body.scrollTop);

      });

    }

  }