官方介绍:

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属性进行赋值,一旦赋值的话,想象一下才更新,又进行赋值,赋值后又触发更新,更新又赋值会发生什么。

目前只想到这个应用场景,后面有其他使用场景的话会随时进行更新~

Logo

前往低代码交流专区

更多推荐