在之前的练习中，我们了解到状态是深度响应式——例如，如果你更改对象的属性或推送到数组，它将导致 UI 更新。这是通过创建一个代理来拦截读写操作实现的。
有时，这不是你想要的。如果你没有更改单个属性，或者如果维护引用相等性很重要，那么你可以使用原始状态。
在这个示例中，我们有一个 Svelte 股票价格稳步上涨的图表。我们希望图表在有新数据传入时更新，我们可以通过将data转换为状态来实现……
应用
let data = $state(poll());……但当它在几毫秒后就被丢弃时，没有必要使其深度响应。相反，使用$state.raw
应用
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>