1. Introduction#

Many frontend beginners are confused: I’ve already learned HTML/CSS/JavaScript, why do I still need to learn a framework?

Let’s first go back to the original way of writing pages with the “big three”:

1
//Native approach: manually manipulating the DOM
2
const list = document.getElementById('todo-list');
3
const input = document.getElementById('todo-input');
4
const button = document.getElementById('add-btn');
5

6
button.addEventListener('click', () => {
7
    const text = input.value;
8
    const li = document.createElement('li');
9
    li.textContent = text;
10

11
    const delBtn = document.createElement('button');
12
    delBtn.textContent = 'Delete';
13
    delBtn.addEventListener('click', () => li.remove());
14

15
    li.appendChild(delBtn);
16
    list.appendChild(li);
17
    input.value = '';
18
});

This code runs. But as pages get more and more complex, you’ll notice a few pain points:

1. State and UI are out of sync: When data changes, you have to manually update the DOM (forget, and you get a bug)
2. Messy code organization: Event listeners, DOM operations, and data handling are all mixed together
3. Hard to reuse: Switching to another page means copy-pasting, and changing one place easily misses another
4. Performance optimization is a chore: Which DOM nodes should update and which shouldn’t is all up to you to figure out

Frameworks were born to solve these problems.

2. The Core Idea of Frameworks#

Whether it’s React or Vue, all modern frontend frameworks share the same core idea:

1
Data (State) → Framework automatically → Interface (UI)

You only need to care about what the data is, and the framework handles turning data into the interface. When data changes, the framework automatically updates the interface — you never have to manually createElement, appendChild, remove again.

3. React: The Functional Philosophy of Data-Driven Views#

1
UI = f(State)

1
function TodoList() {
2
    const [todos, setTodos] = useState([]);
3
    const [text, setText] = useState('');
4

5
    const addTodo = () => {
6
        setTodos([...todos, { id: Date.now(), text, done: false }]);
7
        setText('');
8
    };
9

10
    const removeTodo = (id) => {
11
        setTodos(todos.filter(t => t.id !== id));
12
    };
13

14
    return (
15
        <div>
16
            <input
17
                value={text}
18
                onChange={(e) => setText(e.target.value)}
19
                placeholder="Enter a todo item"
20
            />
21
            <button onClick={addTodo}>Add</button>
22
            <ul>
23
                {todos.map(todo => (
24
                    <li key={todo.id}>
25
                        {todo.text}
26
                        <button onClick={() => removeTodo(todo.id)}>Delete</button>
27
                    </li>
28
                ))}
29
            </ul>
30
        </div>
31
    );
32
}

4. Vue: The Progressive Template Philosophy#

1
<template>
2
    <div>
3
        <input
4
            v-model="text"
5
            placeholder="Enter a todo item"
6
            @keyup.enter="addTodo"
7
        />
8
        <button @click="addTodo">Add</button>
9
        <ul>
10
            <li v-for="todo in todos" :key="todo.id">
11
                {{ todo.text }}
12
                <button @click="removeTodo(todo.id)">Delete</button>
13
            </li>
14
        </ul>
15
    </div>
16
</template>
17

18
<script setup>
19
import { ref } from 'vue';
20

21
const text = ref('');
22
const todos = ref([]);
23

24
function addTodo() {
25
    if (!text.value.trim()) return;
26
    todos.value.push({ id: Date.now(), text: text.value, done: false });
27
    text.value = '';
28
}
29

30
function removeTodo(id) {
31
    todos.value = todos.value.filter(t => t.id !== id);
32
}
33
</script>

5. React vs Vue: How to Choose#

There is no best framework, only the framework that suits you best. If you like the minimalist philosophy of “everything is JavaScript,” choose React; if you’re more used to the intuitive way of “template + script + style separation,” choose Vue.

6. Frameworks Don’t Mean Abandoning the Fundamentals#

A common misconception: “Once you learn a framework, you don’t need to learn JavaScript anymore.”

In fact, it’s the exact opposite: frameworks are abstractions built on top of the fundamentals, and only by understanding the fundamentals can you truly master a framework. The following skills remain important in framework development:

7. Summary#

React and Vue are essentially doing the same thing: letting you describe the UI in a declarative way, with the framework responsible for efficiently syncing data to the DOM.

• React says: “UI is a function of state — treat everything as JavaScript”
• Vue says: “HTML is the best template — let the reactive system automatically track dependencies”

Once you learn one, you can pick up the other quickly — because they share the same core philosophy: data-driven views.

--- END CONTENT ---