一、知识点总结
1. MVVM模式核心
- 架构定义:将应用分为Model(数据与业务逻辑)、View(界面展示)、ViewModel(数据与界面桥梁)三层,通过状态变量驱动UI自动更新。
- 关键角色:
- Model:存储数据(如TodoData类的planList),不直接操作UI。
- View:展示UI(如页面组件、业务组件),通过绑定ViewModel数据更新。
- ViewModel:管理状态(如@State变量),处理交互逻辑,同步Model与View。
- 状态管理装饰器:
- @State:声明组件内状态变量,变化时触发UI刷新(如
@State isFinished: boolean = false
)。 - @Prop:父子组件单向传递,子组件深拷贝数据,不影响父组件。
- @Link:父子组件双向绑定,数据变化同步更新。
- @Observed:修饰类以生成响应式数据,用于Model层(如
@Observed class TodoData
)。
- @State:声明组件内状态变量,变化时触发UI刷新(如
2. 备忘录开发实战
- 组件拆分:
- 父组件(Index):组合子组件,管理全局状态(如
planList
数组)。 - 子组件(TodoComponent、AllChooseComponent等):通过@Prop/@Link接收状态,封装UI逻辑。
- 父组件(Index):组合子组件,管理全局状态(如
- 循环渲染:使用
ForEach
遍历数组生成组件(如ForEach(this.planList, (item) => {...}
)。 - 代码优化:
- @Builder方法:复用UI片段(如
displayIcon
方法封装图标显示)。 - MVVM重构:按Model/ViewModel/View分层,提升代码可维护性。
- @Builder方法:复用UI片段(如
3. ArkTS开发案例
- 水仙花数:通过取余和整除获取各位数字,判断三次方和是否等于原数。
- 九九乘法表:双层
for
循环生成二维数组,日志输出结果。 - 回文字符串:双指针法对比首尾字符(如
i
和j
分别指向首尾)。 - 字符串反转:逆序遍历字符串拼接。
- 闰年判断:根据年份与4、400的整除关系判断。
二、思维导图
三、模拟考试题
1. 单选题(10题×3分=30分)
-
MVVM模式中负责UI展示的是( )
A. Model
B. View
C. ViewModel
D. State
答案:B -
以下装饰器中用于父子组件双向绑定的是( )
A. @State
B. @Prop
C. @Link
D. @Observed
答案:C -
循环渲染数组应使用的组件是( )
A. ForEach
B. For
C. While
D. List
答案:A -
@Builder方法的主要作用是( )
A. 声明状态变量
B. 复用UI片段
C. 定义Model数据
D. 处理网络请求
答案:B -
水仙花数的判断条件是( )
A. 各位数字平方和等于原数
B. 各位数字三次方和等于原数
C. 各位数字和等于原数
D. 原数能被3整除
答案:B -
闰年的判断逻辑正确的是( )
A. 能被4整除
B. 能被4整除且不能被100整除,或能被400整除
C. 能被100整除
D. 能被400整除
答案:B -
MVVM架构中View不能直接访问( )
A. ViewModel
B. Model
C. 父组件
D. 子组件
答案:B -
@Observed装饰器的作用是( )
A. 声明组件内状态
B. 生成响应式数据类
C. 定义组件样式
D. 处理事件回调
答案:B -
字符串反转的正确实现方式是( )
A. 使用reverse()方法
B. 逆序遍历拼接
C. 双指针交换
D. 正则表达式替换
答案:B -
九九乘法表的实现需要( )
A. 单层循环
B. 双层循环
C. 三层循环
D. 递归调用
答案:B
2. 判断题(10题×1分=10分)
-
@State装饰的变量变化时会自动刷新UI。( )
答案:√ -
Model层可以直接操作View层组件。( )
答案:×(需通过ViewModel) -
@Prop装饰的参数支持父子组件双向同步。( )
答案:×(单向传递) -
ForEach组件必须指定唯一标识。( )
答案:√ -
水仙花数是指三位数中各位数字三次方和等于原数的数。( )
答案:√ -
MVVM重构后,View层可以直接访问Model层数据。( )
答案:×(需通过ViewModel) -
闰年判断中,能被400整除的年份一定是闰年。( )
答案:√ -
@Builder方法不能在组件外调用。( )
答案:√ -
字符串反转只能通过循环实现。( )
答案:×(也可使用数组reverse) -
ViewModel层负责处理业务逻辑和数据同步。( )
答案:√
3. 简答题(4题×5分=20分)
-
简述MVVM模式的三层架构及职责。
参考答案:- Model:存储数据与业务逻辑,不直接操作UI;
- View:展示界面,通过绑定ViewModel数据更新;
- ViewModel:作为桥梁,管理状态变量,同步Model与View,处理交互逻辑。
-
说明@State、@Prop、@Link的区别。
参考答案:- @State:组件内状态变量,变化时刷新UI;
- @Prop:父子组件单向传递,子组件深拷贝数据;
- @Link:父子组件双向绑定,数据变化同步更新。
-
简述使用ForEach进行循环渲染的步骤。
参考答案:- 定义数组数据源(如
@State planList: string[]
); - 在build()中使用
ForEach
遍历数组,生成组件; - 提供唯一标识(如
(item) => item
)避免渲染错误。
- 定义数组数据源(如
-
写出闰年判断的逻辑条件。
参考答案:
年份能被4整除且不能被100整除,或者能被400整除,即(year % 4 === 0 && year % 100 !== 0) || (year % 400 === 0)
。
4. 程序填空题(2题×10分=20分)
题目1:补全@Link装饰器实现双向绑定。
@Component
struct ChildComponent {@Link isChecked: boolean;build() {Checkbox({ checked: this.isChecked }).onChange((value) => {this.isChecked = ______; // 补全双向绑定})}
}
答案:value
题目2:补全水仙花数判断逻辑。
export function daffodilsNumber(): number[] {const result: number[] = [];for (let i = 100; i < 1000; i++) {const a1 = i % 10; // 个位const a2 = Math.floor(i % 100 / 10); // 十位const a3 = ______; // 百位if (a1*a1*a1 + a2*a2*a2 + a3*a3*a3 === i) {result.push(i);}}return result;
}
答案:Math.floor(i / 100)
5. 编程题(2题×10分=20分)
题目1:使用@State和ForEach实现待办事项列表,点击事项标记完成(添加删除线)。
参考代码:
@Entry
@Component
struct TodoList {@State tasks: string[] = ['吃饭', '学习', '运动'];@State isFinished: boolean[] = [false, false, false];build() {Column() {Text('待办事项').fontSize(24).fontWeight(700);ForEach(this.tasks, (task, index) => {Row() {Text(task).fontSize(20).decoration({type: this.isFinished[index] ? TextDecorationType.LineThrough : TextDecorationType.None})Button('完成').onClick(() => {this.isFinished[index] = !this.isFinished[index];})}.width('90%').margin(5)}, (task) => task);}.width('100%').padding(10);}
}
题目2:实现回文字符串判断函数,使用双指针法。
参考代码:
export function isPalindrome(str: string): boolean {let left = 0;let right = str.length - 1;while (left < right) {if (str.charAt(left) !== str.charAt(right)) {return false;}left++;right--;}return true;
}
评分要点:双指针初始化、循环对比、正确返回布尔值。