在先前的練習中，我們學到狀態是深層反應式的 — 如果您（例如）更改物件的屬性，或推入陣列，它將會導致 UI 更新。這是透過建立一個Proxy來攔截讀取和寫入來實現的。
有時，這並不是您想要的。如果您沒有變更個別屬性，或者保持引用相等性很重要，那麼您可以改用原始狀態。
在此範例中，我們有一個 Svelte 股票價格穩步上漲的圖表。我們希望在收到新資料時更新圖表，我們可以透過將data轉變為狀態來實現...
App
let data = $state(poll());...但是當它在幾毫秒後被丟棄時，沒有必要使其成為深層反應式。相反地，請使用$state.raw。
App
let data = $state.raw(poll());修改原始狀態不會有直接影響。一般來說，強烈不建議修改非反應式狀態。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<script>
import { scale } from './utils.js'; import { poll } from './data.js';let data = poll();
let w = $state(1);
let h = $state(1);
const min = $derived(Math.min(...data) - 5);
const max = $derived(Math.max(...data) + 5);
const x = $derived(scale([0, data.length], [0, w]));
const y = $derived(scale([min, max], [h, 0]));
const ticks = $derived.by(() => {const result = [];
let n = 10 * Math.ceil(min / 10);
while (n < max) {result.push(n);
n += 10;
}
return result;
});
$effect(() => { const interval = setInterval(() => {data = poll();
}, 200);
return () => {clearInterval(interval);
};
});
</script>
<div class="outer">
<svg width={w} height={h} bind:clientWidth={w} bind:clientHeight={h}> <line y1={h} y2={h} x2={w} /> {#each ticks as tick} <g class="tick" transform="translate(0,{y(tick)})"> <line x2={w} /> <text x={-5}>{tick}</text></g>
{/each} <polyline points={data.map((d, i) => [x(i), y(d)]).join(' ')} /> <text x={10} y={10} font-size={36}>$SVLT</text></svg>
</div>
<style>
.outer {width: 100%;
height: 100%;
padding: 2em;
box-sizing: border-box;
}
svg {width: 100%;
height: 100%;
overflow: visible;
}
polyline {fill: none;
stroke: #ff3e00;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
line {stroke: #aaa;
}
.tick {stroke-dasharray: 2 2;
text {text-anchor: end;
dominant-baseline: middle;
}
}
</style>