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

【问题标题】：How to more explicitly declare a variable than via const?如何比通过 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 函数

标签： vue.js webstorm vuejs3 quasar-framework goland

【解决方案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 尝试更新版本。
啊，我的错，对不起。我正在查看另一个答案并将它们混合在一起。您的解决方案将起作用，我想避免创建两个额外的功能，而不仅仅是设置标志。谢谢。