考慮以下苗條組件
<script>
let x;
$: y = window.innerWidth;
</script>
<svelte.window bind:innerWidth={x} />
<h1>{x}</h1>
<h1>{y}</h1>
<h1>{window.innerWidth}</h1>
這將呈現三個h1HTML 元素，它們顯示innerWidth了 window 物件的屬性。
但是，當您更改視窗的寬度時，只有第一個會更新。
我的問題是為什么其他方法不隨著視窗寬度的變化而更新？
我是 javascript 和 svelte 的新手，但它看起來好像 <svelte.window /> 是一個匯入，它允許我們系結到視窗物件，這似乎允許我們“監聽”window.innerWidth 上的更新。但為什么不是其他方法呢？為什么它們沒有連接？
uj5u.com熱心網友回復：
svelte:window是相當神奇的1但通常規則是反應性僅限于本地狀態（在組件中宣告的變數）、道具（例如此處bind:innerWidth）和存盤。
由于其他方法window.innerWidth都不是上述訪問，因此狀態不會更新。$:不能將非反應性的東西變成反應性的東西，它只是傳播現有的反應性。
1它在內部使用事件或觀察者來模擬常規 Svelte 組件的反應性。它不僅僅是讀取window屬性。
用于window屬性的事件串列：
const associated_events = {
innerWidth: 'resize',
innerHeight: 'resize',
outerWidth: 'resize',
outerHeight: 'resize',
scrollX: 'scroll',
scrollY: 'scroll'
};
資源
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/510248.html
下一篇：使用開/關按鈕禁用和啟用按鈕組