Angular 变更检测与 Svelte 变更检测
Angular change detection vs Svelte change detection
我在日常工作中使用 Angular,同时也在学习 Svelte。我知道 Angular 或 Svelte 都没有使用虚拟 dom 和差异化。我知道两者都有其他变化检测机制,而且根据我的研究,它们看起来很相似。有人可以向我解释每种方法的独特之处以及 Angular 和 Svelte 的变更检测机制有何不同吗?
免责声明:我对 Angular 和 Svelte 的内部运作都不是很了解,所以对我的回答持保留态度。
Angular 中的更改检测是通过某种形式的脏检查完成的。每次 Angular 被告知这样做时,检查就是 运行。在正常的 Angular 项目中,这是通过使用 Zone.js
实现的,它修补了所有可能的事件源,例如 setInterval
或 DOM 事件侦听器。当修补事件触发时,Angular 触发更改检测。然后将 Angular 感兴趣的每个变量与之前的状态进行比较,如果它们不同,则重新渲染内容。 This blog post 更详细地解释了这个概念。
Svelte 不进行脏检查,而是在编译时分析每个可能触发重绘的变量,并使用 $$invalidate
调用包装赋值。所以 foo = 'bar'
变成了 $$invalidate(.., foo = "bar");
( 侧节点:这就是为什么 array.push(item)
之类的东西不会触发 - 没有赋值 - 这是新 Svelte 开发人员的常见困惑).所有变量失效的地方都将在下一次浏览器更新中重新绘制。
我在日常工作中使用 Angular,同时也在学习 Svelte。我知道 Angular 或 Svelte 都没有使用虚拟 dom 和差异化。我知道两者都有其他变化检测机制,而且根据我的研究,它们看起来很相似。有人可以向我解释每种方法的独特之处以及 Angular 和 Svelte 的变更检测机制有何不同吗?
免责声明:我对 Angular 和 Svelte 的内部运作都不是很了解,所以对我的回答持保留态度。
Angular 中的更改检测是通过某种形式的脏检查完成的。每次 Angular 被告知这样做时,检查就是 运行。在正常的 Angular 项目中,这是通过使用 Zone.js
实现的,它修补了所有可能的事件源,例如 setInterval
或 DOM 事件侦听器。当修补事件触发时,Angular 触发更改检测。然后将 Angular 感兴趣的每个变量与之前的状态进行比较,如果它们不同,则重新渲染内容。 This blog post 更详细地解释了这个概念。
Svelte 不进行脏检查,而是在编译时分析每个可能触发重绘的变量,并使用 $$invalidate
调用包装赋值。所以 foo = 'bar'
变成了 $$invalidate(.., foo = "bar");
( 侧节点:这就是为什么 array.push(item)
之类的东西不会触发 - 没有赋值 - 这是新 Svelte 开发人员的常见困惑).所有变量失效的地方都将在下一次浏览器更新中重新绘制。