YouTip

## Core Business Development\n\nNext, we will build the core task management logic in App.vue.\n\n**The overall logic is as follows:**\n\n1. **Data Flow**: Input content in the input box -> `v-model` updates `newTaskTitle`.\n2. **Action Trigger**: Press Enter -> Execute `addTask` -> Add an item to the `tasks` array.\n3. **View Update**: `tasks` changes -> Triggers automatic recalculation of `filteredTasks` -> Vue re-renders the `li` list.\n4. **State Transition**: Click filter button -> Modify `currentFilter` value -> Triggers `filteredTasks` calculation again -> Page displays tasks of different categories.\n\n### Basic Layout and Reactive Data\n\nWrite the following in src/App.vue:\n\n## Example\n\n\n\n\n\n\n\nThe interface after running is as follows:\n\n!(https://example.com/wp-content/uploads/2026/01/f7b2aa6a-b2c3-474c-8acd-b22df774f383.png)\n\n* * *\n\n## Core Knowledge Points\n\n### 1. Composition API\n\nThe above code demonstrates the most core logic organization method of Vue 3:\n\n* **`ref` (Reactive Basics)**: `tasks`, `newTaskTitle`, etc., are reactive references. Modifying them in `