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:
30
08-vue3/03-watch-and-watch-effect/starter.js
Normal file
30
08-vue3/03-watch-and-watch-effect/starter.js
Normal file
@@ -0,0 +1,30 @@
|
||||
const { createApp, ref, computed, watch, watchEffect } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
const keyword = ref("");
|
||||
const courses = ref([
|
||||
{ id: 1, title: "ref 和 reactive" },
|
||||
{ id: 2, title: "watch 和 watchEffect" },
|
||||
{ id: 3, title: "组件通信" },
|
||||
]);
|
||||
|
||||
const filteredCourses = computed(() => {
|
||||
// 任务:根据 keyword 过滤课程
|
||||
return courses.value;
|
||||
});
|
||||
|
||||
watch(keyword, (newValue, oldValue) => {
|
||||
// 任务:输出关键字变化日志
|
||||
});
|
||||
|
||||
watchEffect(() => {
|
||||
// 任务:输出当前筛选后的数量
|
||||
});
|
||||
|
||||
return {
|
||||
keyword,
|
||||
filteredCourses,
|
||||
};
|
||||
},
|
||||
}).mount("#app");
|
||||
Reference in New Issue
Block a user