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:
59
08-vue3/11-before-hooks-and-expose/starter.js
Normal file
59
08-vue3/11-before-hooks-and-expose/starter.js
Normal file
@@ -0,0 +1,59 @@
|
||||
const {
|
||||
createApp,
|
||||
ref,
|
||||
onBeforeMount,
|
||||
onBeforeUpdate,
|
||||
onBeforeUnmount,
|
||||
} = Vue;
|
||||
|
||||
createApp({
|
||||
components: {
|
||||
ChildPanel: {
|
||||
template: `
|
||||
<div>
|
||||
<p>我是子组件</p>
|
||||
<input ref="inputEl" type="text" placeholder="等待父组件调用 focus" />
|
||||
</div>
|
||||
`,
|
||||
setup(props, { expose }) {
|
||||
const inputEl = ref(null);
|
||||
|
||||
onBeforeMount(() => {
|
||||
// 任务:输出 beforeMount 日志
|
||||
});
|
||||
|
||||
onBeforeUpdate(() => {
|
||||
// 任务:输出 beforeUpdate 日志
|
||||
});
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
// 任务:输出 beforeUnmount 日志
|
||||
});
|
||||
|
||||
function focusInput() {
|
||||
// 任务:聚焦 inputEl
|
||||
}
|
||||
|
||||
// 任务:通过 expose 暴露 focusInput
|
||||
|
||||
return {
|
||||
inputEl,
|
||||
};
|
||||
},
|
||||
},
|
||||
},
|
||||
setup() {
|
||||
const showChild = ref(true);
|
||||
const childPanel = ref(null);
|
||||
|
||||
function focusChildInput() {
|
||||
// 任务:调用 childPanel.value 暴露出来的方法
|
||||
}
|
||||
|
||||
return {
|
||||
showChild,
|
||||
childPanel,
|
||||
focusChildInput,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
Reference in New Issue
Block a user