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

问题描述

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

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

<h1>Hello World!</h1>

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

解决方法

使用Svelte无法直接实现。这样做的原因是因为这些变量在文档的全局范围内不存在，它们被浏览器封装到应用程序中，并且不受外界干扰。

解决此问题的一种方法是显式定义执行此操作的方法

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

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

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

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 svelte-3