Vue 功能，在运行函数之前等待组件完成重新渲染

Question

我正在尝试创建一个小型 vue 应用程序，当屏幕尺寸发生变化时，它会修改 hello world div。

我为组件安装了一个侦听器，用于侦听视口大小调整。如果视口发生变化，它会调用一个修改 hello world div 的函数，modifyTargetDiv()。

在modifyTargetDiv() 中，我使用了this.$nextTick，这是不对的，因为该关键字不会等待组件完成重新渲染。因此，我有时会得到 refs 尚未呈现，而有时 refs 已呈现。我的问题是什么是正确的 vue 功能，它总是给我 refs 渲染。谢谢。

注意：我已经查看了 vue updated() 钩子，但视口调整大小不会触发它。此外，mounted() 挂钩仅在组件第一次渲染时运行一次，因此它不适用于调整视口大小。

<template> 

  <div ref="target">  Hello world </div>

</template> 

<script>
  mounted() {
    window.addEvenListener('resize', this.modifyTargetDiv); 
  },
  methods: {
    modifyTargetDiv() {
      this.$nextTick(() => {
        if (this.$refs.target == null) {
          console.log(`refs hasn't rendered yet`);
        } else {
          console.log('refs rendered');
          // do something with the div 
          // this.$refs.target.getHeight()
        }
      });
    }
  }
</script>

Answer 1

这里有几个错误。首先，您在将函数声明为modifyTargetDiv 时使用modifyTarget 函数进行监听。二、函数名是$nextTick而不是$nexttick。

此外，您将 function 传递给 $nextTick，而不是传递 arrow 函数。传统函数的 this 指针会指向全局窗口对象。箭头函数将在您的回调函数中保留this 指针。

this.$nextTick(() => { 
  console.log(this.$refs.target);
});