Open code, practice, and notes →
Download source with English comments · for reading
Vue · 05 List Keys and Conditional Lifetimes
Series contents · Technology map
Stage: Reactive Data and Templates · Editable example · Storage ID: vue-step-05
Goals and learning outcomes
- Notes stay with the same card after sorting with an id key.
- Record note preservation results for each hiding method.
Prerequisites
Unit 5 builds on the work and experiment records from Unit 4.
Key concepts and explanations
List identity
The key in v-for identifies each item. Index keys can obscure the connection between input state and data after reordering.
Conditional display
v-if creates or removes components. v-show retains the DOM and changes its display style.
Practice setup
First check the execution scope guidance on the example screen. The following is the preparation environment for extending the assignment in a separate project. Use .vue SFCs and script setup in a separate Vue Vite project. Record package versions and the lockfile, and run on the development server. The built-in Vue examples use the h function and are not a general-purpose SFC compiler.
The linked example is a starting point. It does not implement every task below. Complete work beyond its supported scope in a separate project.
Practice tasks
- Add a local input to src/CardRow.vue and create a list with id keys.
- Enter a note in the first row, then reverse the card array.
- Hide the list with v-if and v-show separately, and compare whether local notes remain.
Variables to observe
| Variable | Baseline | Change | Expected change / hypothesis |
|---|---|---|---|
| Hiding method | v-show | v-if | After removal through v-if, the local note takes the initial value of a new instance. |
Predictions in this table are not measured results. Change one condition at a time and record why the actual result differs.
Completion criteria
- Notes stay with the same card after sorting with an id key.
- Record note preservation results for each hiding method.
Self-check
- Does a timer hidden through v-show keep running?
- What happens on a title edit if the title is used as the key?
Official references
Linked example and execution scope
Example source · Runtime environments and limits
This is an experiment with actual Vue reactivity and render functions. Check SFC templates in an external compilation environment.
Source code and records are not overwritten automatically. Resetting an existing example also preserves your notes.
Next learning
Previous: Pure Computation with computed · Next: Events and Input Conversion