Svelte响应式疑问：为何仅绑定window.innerWidth的元素随窗口更新？

先看你的组件代码：

<script>
let x;
$: y = window.innerWidth;
</script>

<svelte.window bind:innerWidth={x} />
<h1>{x}</h1>
<h1>{y}</h1>
<h1>{window.innerWidth}</h1>

下面分三种情况解释差异：

1. <svelte.window bind:innerWidth={x}>能实时更新的原因 #

<svelte.window>是Svelte专门为监听window对象属性设计的语法糖。它在底层自动帮你做了两件事：

• 注册了resize事件监听，实时捕获窗口宽度变化；
• 把最新的innerWidth值同步给响应式变量x，触发Svelte的响应式更新机制，让模板里的{x}重新渲染。

相当于Svelte替你封装了原生事件监听和响应式变量更新的逻辑，所以x能跟着窗口宽度实时变化。

2. 为什么$: y = window.innerWidth不会更新？ #

Svelte的响应式语句（$:开头）的触发逻辑是：只有当语句里依赖的响应式变量发生变化时，才会重新执行。这里window.innerWidth是浏览器原生属性，不属于Svelte的响应式变量体系：

• 组件初始化时，这条语句会执行一次，把当前窗口宽度赋值给y；
• 之后窗口宽度变化时，Svelte无法感知到这个原生属性的变化，所以不会重新运行这条语句，y的值就停留在初始状态。

3. 直接写{window.innerWidth}为什么不更新？ #

Svelte的模板渲染是响应式驱动的——只有当模板中用到的响应式变量变化时，才会重新渲染对应部分。window.innerWidth是原生属性，不在Svelte的响应式追踪范围内：

• 组件第一次渲染时会读取它的当前值并显示；
• 窗口宽度变化后，没有响应式变量通知Svelte“值变了需要重新渲染”，所以这个<h1>的内容不会更新。

总结 #

Svelte的响应式系统只追踪自己管理的响应式变量，原生浏览器属性的变化不会自动触发组件更新。<svelte.window>是Svelte提供的专属工具，帮你把原生属性的变化转换成响应式更新；而直接读取原生属性或用响应式语句绑定原生属性，都没有触发Svelte的响应式追踪机制，所以不会实时更新。

内容的提问来源于stack exchange，提问作者rorance_