如何通过浏览器控制台更改 Svelte 应用程序中的变量值

Question

能否请您解释一下如何在 Svelte 应用程序中查看反应性。因此，如果我在浏览器的控制台中更改变量值，我会看到更新的 DOM。如果我下面有 App.svelte 文件，是否可以在浏览器控制台中为“name”变量分配新值并立即看到更新“h1”元素？

<script>
let name = 'world';
</script>

<h1>Hello world!</h1>

<h1>Hello {name}!</h1>

Answer 1

Svelte 无法直接做到这一点。这是因为那些变量不存在于你的文档的全局范围内，它们被浏览器封装到应用程序中并屏蔽了外部干扰。

解决这个问题的一种方法是明确定义一种方法来做到这一点

<script>
    let name = 'world';
    
    window.setName = (val) => name = val;
</script>

<h1>Hello {name}!</h1>

现在您可以在控制台中执行 window.setName('test')，它会更改 name

的值

Answer 2

Svelte 会编译您的代码，因此无法从浏览器控制台获取变量。这也意味着您不能从 CDN 使用 Svelte，即 <script src="//cdn/svelte.min.js"> 无效。

但是，如果您需要检查反应性，您可以在（比如）单击按钮时更新变量值。

<script>
    let message = 'Hello';
</script>

<button on:click={() => { message = 'Bye bye' }}>
    Change content
</button>
<h1>
    >>> {message}
</h1>

或者按照文档中的这个片段 - https://svelte.dev/tutorial/text-inputs

如何通过浏览器控制台更改 Svelte 应用程序中的变量值

How to change variable value in Svelte app via browser's console

svelte

svelte-3