javascript - Vue 生命钩子中的先前和当前数据

Question

如何在更新的生命钩子（类似于 React）中获取以前和当前的数据？我想将元素列表滚动到最底部，为此我需要：

• 已经渲染了更新的 DOM（所以我想使用更新的钩子来计算滚动）
• 是否滚动的信息（仅当当前元素的数量大于以前的元素时滚动）。

我想到了这样的事情：

  name: "list",
  props: ["elements"],
  data() {
    return {
      scrollBottom: false
    };
  },
  updated() {
    if (this.scrollBottom) {
      window.scroll(0, this.$root.$el.scrollHeight); /* full window / app height list*/
    }
  },
  watch: {
    elements(current, prev) {
      this.scrollBottom = current.length > prev.length;
    }
  }

我不确定这是否是一种“正确”的方法，但 Vue life hooks 没有收到任何关于以前数据的信息。我可以做得更好吗？谢谢你的帮助。

编辑 我发现这个有用的主题：链接。显然，处理这个问题的最好方法是使用 this.$nextTick 方法。

标签： javascriptvue.jsscrollvuejs2hook

Answer 1

好吧，在 Vue官方文档中，他们提到如下：

更新的钩子

调用此钩子时，组件的 DOM 将已更新，因此您可以在此处执行依赖于 DOM 的操作。但是，在大多数情况下，您应该避免更改钩子内部的状态。为了对状态变化做出反应，通常最好使用计算属性或观察者。

希望这可以帮助！