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

Posted 2023-02-22

【中文标题】Vue 功能，在运行函数之前等待组件完成重新渲染

【英文标题】：Vue feature that waits until component finish re-rendering before running a function

【发布时间】：2021-12-03 09:47:56

【问题描述】：

我正在尝试创建一个小型 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>

【问题讨论】：

我认为应该是 $nextTick 而不是 $nexttick

请提供可以重现问题的***.com/help/mcve。这特定于您使用的组件。即使没有 nextTick，您发布的代码也将可靠地在 mounted 中有一个引用。您不会取消订阅该事件，唯一可能没有 ref 的时刻是组件已被卸载。

【参考方案1】：

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

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

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

【讨论】：

很多优点。谢谢。但是，我并没有在我的项目中犯这些错误。我即时编写了代码 sn-p。由于这种解释，我认为 nextTick 在这种情况下是不正确的 - “nextTick 允许您在更改一些数据之后执行代码，并且 Vue.js 根据您的数据更改更新了虚拟 DOM，但在浏览器呈现该更改之前在页面上。”来自 - ***.com/questions/47634258/…