MVVM设计模式

2025-02-28 88 阅读1分钟

1.MVVM分解

Model（数据）：你的游戏数据，比如角色的生命值、分数等
View（视图）：游戏界面，你看到的画面
ViewModel（视图模型）：负责沟通数据和界面的"翻译官"

const userModel = {
    name: '张三',
    age: 25
};

// ViewModel（Vue实例）
const vm = new Vue({
    data: userModel,
    methods: {
        updateName(newName) {
            this.name = newName;
        }
    }
});

// View（视图层）
<template>
    <div>
        <p>姓名：{{ name }}</p>
        <p>年龄：{{ age }}</p>
        <input v-model="name">
    </div>
</template>

// 1. 数据流向（Model -> View）
const vm = new Vue({
    data: {
        message: 'Hello'
    }
});
// 当message改变时，视图自动更新
vm.message = 'Hi'; // 页面上显示的文本会自动变成"Hi"

// 2. 用户交互（View -> Model）
<input v-model="message">
// 用户输入时，数据自动更新

2.MVVM的优点

自动更新。不需要手动更新dom，视图会自动更新，通过ViewModel自动同步数据和视图。
代码分离。数据逻辑和视图的代码是分离开的。易于维护。开发者只需关注业务逻辑和数据处理。