如何比通过 const 更明确地声明变量？

Posted 2023-03-16

【中文标题】如何比通过 const 更明确地声明变量？

【英文标题】：How to more explicitly declare a variable than via const?

【发布时间】：2021-12-25 09:34:00

【问题描述】：

我有一个发出 note-not-saved 的组件 (NoteComponent)。此消息通过

处理

<template>
(...)
    <NoteComponent @note-not-saved='() => noteNotSaved=true' />
(...)
</template>

noteNotSaved 本身在我的<script> 部分中定义：

<script setup lang='ts'>
(...)
  const noteNotSaved = ref(false)
(...)
</script>

应用程序运行良好，但是我的 IDE（JetBrains GoLand 或 WebStorm）发出了微弱的警告

Variable noteNotSaved implicitly declared

这到底是什么意思？怎么能比这更明确地声明noteNotSaved？

【问题讨论】：

问题可能是 IDE 对script setup 的支持很差。但无论如何，() => noteNotSaved=true 很糟糕。这不是 refs 的修改方式，也没有必要在模板中编写回调。

我在WebStorm中使用过脚本设置，目前还没有很好的支持。

@LucasDavidFerrero：我刚刚尝试了 2021.3 EAP 版本，但尚未修复。我记得 JetBrains 论坛上关于 <script setup 支持的讨论，我认为现在应该没问题（至少现在 IntelliVue 已针对 2021.3 EAP 进行了更新，因此可以使用）

@EstusFlask：您介意多评论一下为什么这是一种不好的方法吗？以及应该如何更好地处理？

在不必要的情况下在模板中编写 JS 会使其更难维护并导致性能开销。应该像答案显示的那样，必须有 setNoteAsNotSaved 函数

【参考方案1】：

IDE 可能会将noteNotSaved=true 视为全局变量的隐式声明。

尝试按如下方式更改其值：

const  createApp, ref  = Vue;

const NoteComponent = 
  template: `<button @click="$emit('note-not-saved')">Click</button>`
;

const App = 
  components:  NoteComponent ,
  setup() 
    const noteNotSaved = ref(false);
    const setNoteAsNotSaved = () => 
      noteNotSaved.value = true;
    
    return  noteNotSaved, setNoteAsNotSaved ;
  
;

createApp(App).mount("#myApp");

<script src="//unpkg.com/vue@next"></script>

<div id="myApp">
  <div><note-component @note-not-saved="setNoteAsNotSaved" /></div>
  <div><p>Note Not Saved: noteNotSaved</p></div>
</div>

【讨论】：

谢谢，但我不确定要更改什么。我使用<script setup ...，所以既没有明确的setup()，也没有return。无论如何，这看起来像是一个 IDE 问题，所以我最好用 JetBrains 提出这个问题。

你能分享一个演示吗？你不能这样做吗：@note-not-saved="this.noteNotSaved = true"

我会尝试制作一个相关的codepen。 this 不应在 Vue 模板中使用，变量会自动绑定（添加 this 会生成 ESLint 警告“意外使用 this”）

@WoJ 尝试更新版本。

啊，我的错，对不起。我正在查看另一个答案并将它们混合在一起。您的解决方案将起作用，我想避免创建两个额外的功能，而不仅仅是设置标志。谢谢。