vue钩子函数之update的项目使用场景

• 官方介绍

updated
类型：Function

详细：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，
你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

执行依赖于 DOM 的操作，确实让人很疑惑，到底有什么使用场景呢？我思考了很久之后，想到自己之前做的即时聊天项目，打开当前会话加载完消息后需要自动滚动到窗口最底部，一开始用的是setTimeout解决，时间不好控制，太短的话页面还没渲染滚动的高度不准确，太长影响用户体验。后面才灵光一闪，updated好像是个完美解决方案。

<template>
  <div ref="test" style=" 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属性进行赋值，一旦赋值的话，想象一下才更新，又进行赋值，赋值后又触发更新，更新又赋值会发生什么。