- Implement dynamic styles and event handling in Vue2 with a card component. - Create lifecycle methods exercise to simulate async data loading and instance destruction. - Develop a component communication exercise with props, events, and slots. - Build a comprehensive course management dashboard with filtering, statistics, and component interactions.
练习 7:生命周期和异步更新
目标
学会在合适的生命周期里加载数据,并理解页面更新的时机。
你要练什么
createdmountedupdatedbeforeDestroydestroyed- 模拟异步请求
任务
请基于页面结构完成以下操作:
- 进入页面时显示 loading
- 在
mounted里模拟异步获取课程数据 - 数据返回后渲染课程列表
- 在
updated里输出更新日志 - 点击按钮时销毁当前实例,并观察销毁日志