vue鈎子函數之update的項目使用場景

• 官方介紹

updated
類型：Function

詳細：由於數據更改導致的虛擬 DOM 重新渲染和打補丁，在這之后會調用該鈎子。

當這個鈎子被調用時，組件 DOM 已經更新，所以你現在可以執行依賴於 DOM 的操作。然而在大多數情況下，
你應該避免在此期間更改狀態。如果要相應狀態改變，通常最好使用計算屬性或 watcher 取而代之。

執行依賴於 DOM 的操作，確實讓人很疑惑，到底有什么使用場景呢？我思考了很久之后，想到自己之前做的即時聊天項目，打開當前會話加載完消息后需要自動滾動到窗口最底部，一開始用的是setTimeout解決，時間不好控制，太短的話頁面還沒渲染滾動的高度不准確，太長影響用戶體驗。后面才靈光一閃，updated好像是個完美解決方案。

<template>
  <div ref="test" style="width: 300px;height: 200px;overflow:auto;background:#eee;">
    <div v-for="item in list" :key="item">{{ item }}</div>
    <div>我自己滾動到底部了</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: []
    }
  },
  mounted() {
    this.list = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20];
  },
  updated() {
    this.$refs.test.scrollTop = this.$refs.test.clientHeight;
  }
}
</script>

同時需要注意的是不能再 updated周期對data屬性進行賦值，一旦賦值的話，想象一下才更新，又進行賦值，賦值后又觸發更新，更新又賦值會發生什么。