Understanding Update Granularity in Major Frontend Frameworks: Svelte, React, and Vue

Introduction

Recent StackOverflow 2021 survey results show that Svelte , despite being a niche framework, ranks among the most popular front‑end frameworks alongside React and Vue . The article begins by questioning whether the rapid evolution of these frameworks makes them hard to master.

Componentization

All mainstream front‑end frameworks follow a component‑based development model that can be abstracted into three layers: Application → Component → Node . Using the Juejin app as an example, the article breaks down the app into header , navigation , list , and footer components, each of which can be further decomposed into sub‑components and ultimately into DOM nodes combined with business logic.

The smallest unit is a node; a node plus its logic forms a component, and multiple components compose an application.

Update Granularity

The rendering process can be expressed as UI = F(state) , where UI is the view, state is the data, and F is the framework’s internal mechanism. Frameworks differ in the granularity at which they react to state changes:

Application‑level updates

Component‑level updates

Node‑level updates

Node‑level Update Framework: Svelte

Svelte performs compile‑time analysis to generate code that directly updates the DOM when a state changes. A simple counter example is described:

Define a count variable with initial value 0 .

Create a handleClick function that increments count .

Render a <button> node bound to handleClick and a <p> node displaying the count.

The three‑step runtime works as follows:

Compile possible state‑to‑node changes into concrete update methods.

Listen for state changes.

When a change occurs, invoke the compiled method to update the corresponding view.

Svelte uses a publish‑subscribe pattern: each state maintains a subscription table; when the state changes, all subscribed callbacks are notified, achieving fine‑grained updates.

Application‑level Update Framework: React

React relies on a virtual DOM. The article provides a TypeScript example of a counter component:

import React, { useState } from 'react';

const Counter: React.FC = () => {
  const [count, setCount] = useState
(0);
  const handleClick = () => setCount(count + 1);
  return <button onClick={handleClick}>{count}</button>;
};

export default () => (
  <>
    <Counter />
    <Counter />
  
);

When a button is clicked, React updates the state, rebuilds a new virtual DOM tree from the root, diffs it against the previous tree, and patches only the changed nodes to the real DOM. This whole‑tree diffing makes React an application‑level update framework.

Component‑level Update Framework: Vue

Vue (both Vue 2 and Vue 3) combines virtual DOM with fine‑grained updates. Vue 3 adds a compile‑time step that further optimizes the update process.

Summary

In summary, the three update granularities correspond to different technical approaches:

Update Granularity

Corresponding Technology

Representative Framework

Application‑level

Virtual DOM

React

Component‑level

Fine‑grained updates, pre‑compilation, virtual DOM

Vue 2 / Vue 3

Node‑level

Fine‑grained updates, pre‑compilation

Svelte

Job‑Seeking Note

The author concludes with a personal request for employment in Hangzhou, seeking a React + TypeScript position with at least two years of experience, a company size over 100 people, and a standard work‑week.