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救生钩未收到有关先前数据的任何信息。我可以做得更好吗？感谢您的帮助。

编辑我发现了这个有用的主题：link。显然，处理此问题的最佳方法是使用this。$ nextTick方法。

Answer 1

好吧，在Vue official docs中，他们提到了以下问题：

更新了挂钩

调用此挂钩时，组件的DOM已更新，因此您可以在此处执行与DOM相关的操作。但是，在大多数情况下，应避免更改挂钩内的状态。为了对状态更改做出反应，通常最好改用计算属性或观察程序。

希望这会有所帮助！

Answer 2

我可以这样写：

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

在监视方法中，直接使用scrollToBottom

Vue生命周期中的先前和当前数据

2 个答案: