feat: Add Vue3 exercises and interview plan
- Introduced Vue3 exercises covering composable API, reactivity, lifecycle hooks, and built-in components. - Added structured interview plan for frontend candidates focusing on HTML, CSS, JavaScript, TypeScript, and Vue. - Included starter files for each exercise and detailed README documentation for guidance.
This commit is contained in:
33
08-vue3/09-reactivity-helpers/starter.js
Normal file
33
08-vue3/09-reactivity-helpers/starter.js
Normal file
@@ -0,0 +1,33 @@
|
||||
const { createApp, reactive, toRef, toRefs, readonly } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const profile = reactive({
|
||||
name: "林晨",
|
||||
stage: "Vue3 入门",
|
||||
studyDays: 12,
|
||||
});
|
||||
|
||||
const name = toRef(profile, "name");
|
||||
const { stage, studyDays } = toRefs(profile);
|
||||
const settings = readonly({
|
||||
theme: "light",
|
||||
});
|
||||
|
||||
function updateProfile() {
|
||||
// 任务:
|
||||
// 1. 更新 name.value
|
||||
// 2. 更新 stage.value
|
||||
// 3. 让 studyDays.value + 1
|
||||
// 4. 不要直接修改 settings.theme
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
stage,
|
||||
studyDays,
|
||||
settings,
|
||||
updateProfile,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
Reference in New Issue
Block a user