Files
front-end-example/08-vue3/03-watch-and-watch-effect/starter.js
charlie d0d8be443b 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.
2026-03-24 23:02:58 +08:00

31 lines
675 B
JavaScript

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");