在 Vue3 组合 API 中让观察者立即工作

Posted 2023-02-16

【中文标题】在 Vue3 组合 API 中让观察者立即工作

【英文标题】：In Vue3 composition API make the watcher work immediately

【发布时间】：2021-03-12 04:02:19

【问题描述】：

使用 Vue3 组合 API。我如何让 watch 立即工作。以下代码不起作用。

watch((immediate=true) => props.isOpen, () => 
        if (props.isOpen && props.preventBackgroundScrolling) 
          document.body.style.setProperty('overflow', 'hidden')
         else 
          document.body.style.removeProperty('overflow')
        

          );

【参考方案1】：

它应该作为选项放置：

watch(() => props.isOpen, () => 
        if (props.isOpen && props.preventBackgroundScrolling) 
          document.body.style.setProperty('overflow', 'hidden')
         else 
          document.body.style.removeProperty('overflow')
        

          ,immediate:true);

或

watch('props.isOpen', () => 
        if (props.isOpen && props.preventBackgroundScrolling) 
          document.body.style.setProperty('overflow', 'hidden')
         else 
          document.body.style.removeProperty('overflow')
        

          ,
       immediate:true
   );

【讨论】：

只是补充一点：推荐使用toRefs。像这样使用它：const isOpen = toRefs(props);