Vue基础教程（2）前端开发技术的发展之MV*模式：Vue.js的魔法课堂：从“996 DOM操作”到“摸鱼式开发”的MV*奇幻漂流-优快云博客

一、前端发展史：从“刀耕火种”到“魔法时代”

曾几何时，前端程序员的生活堪比“搬砖民工”。想更新页面数据？得手动操作DOM，一行行document.getElementById()写得手抽筋，还要担心性能卡成PPT。比如做个简单计数器：

<button id="btn">点了 <span id="count">0</span> 次</button>
<script>
  let count = 0;
  btn.onclick = () => {
    count++;
    document.getElementById('count').innerText = count; // 手动更新DOM！
  };
</script>

这种“996式开发”直到MV模式的出现才被打破。MV本质是代码组织哲学：把数据（Model）、视图（View）和逻辑（*）分开管理，就像把衣服、鞋子和配饰分类收纳，找起来再也不抓狂。

二、MV*模式“家族内斗”：MVC、MVP、MVVM谁才是C位？

MVC（Model-View-Controller）
好比一家餐厅：Model是后厨备菜，View是服务员上菜，Controller是厨师炒菜。用户点单（操作View）后，Controller指挥Model处理数据，再让View更新页面。但问题来了：View和Model容易“私下勾结”，代码维护起来像解一团毛线。
MVP（Model-View-Presenter）
Presenter成了“超级中介”，彻底隔开View和Model。View变“傻白甜”，只会显示数据；所有逻辑都由Presenter包办。缺点是Presenter容易膨胀成“上帝类”，改一行代码可能牵动全身。

MVVM（Model-View-ViewModel）：Vue的终极秘籍！
ViewModel是“智能翻译官”，自动同步View和Model。比如Vue的v-model：

<input v-model="message"> <!-- 输入框内容自动同步到message变量 -->
<p>{{ message }}</p>     <!-- message一变，这里自动更新！ -->

这种数据绑定就像给View和Model拉了条“网线”，数据流动全靠自动感应，程序员终于能摸鱼了！

三、Vue的“摸鱼魔法”核心：响应式原理解剖

Vue的秘诀在于依赖追踪。当我们定义数据data() { return { count: 0 } }时，Vue会偷偷给count装上“传感器”（Object.defineProperty或Proxy）。一旦数据被修改，传感器就触发通知，让依赖它的视图自动更新。

来看个购物车示例，体验Vue的“摸鱼式开发”：

<div id="app">
  <div v-for="item in cart" :key="item.id">
    {{ item.name }} - ¥{{ item.price }} × 
    <button @click="item.quantity--">-</button>
    {{ item.quantity }}
    <button @click="item.quantity++">+</button>
  </div>
  总价：¥{{ totalPrice }}
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      cart: [
        { id: 1, name: '咖啡', price: 30, quantity: 2 },
        { id: 2, name: '甜甜圈', price: 15, quantity: 1 }
      ]
    },
    computed: {
      totalPrice() {
        return this.cart.reduce((sum, item) => sum + item.price * item.quantity, 0);
      }
    }
  });
</script>

——不用手动计算总价，不用操作DOM，数据一变，页面自动刷新！这就是MVVM的魔力。

四、手搓迷你Vue：30行代码还原“魔法本质”

想彻底看穿Vue？不如自己写个极简版：

class MiniVue {
  constructor(options) {
    this.data = options.data;
    this.observer(this.data); // 给数据装“传感器”
    this.compile(options.el); // 解析模板
  }
  
  observer(data) {
    Object.keys(data).forEach(key => {
      let value = data[key];
      const dep = []; // 依赖列表
      Object.defineProperty(data, key, {
        get() {
          dep.push(target); // 记录依赖当前数据的计算函数
          return value;
        },
        set(newVal) {
          value = newVal;
          dep.forEach(fn => fn()); // 数据变了，通知依赖更新！
        }
      });
    });
  }
  
  compile(el) {
    const element = document.querySelector(el);
    element.innerHTML = element.innerHTML.replace(/\{\{(.*?)\}\}/g, (_, key) => {
      target = () => element.innerHTML = element.innerHTML.replace(/\{\{(.*?)\}\}/g, (_, k) => this.data[k.trim()]);
      return this.data[key.trim()];
    });
  }
}

// 使用示例
new MiniVue({
  el: '#app',
  data: { message: '你好，迷你Vue！' }
});

这个玩具代码揭示了Vue的核心：getter收集依赖，setter触发更新。真正的Vue加了虚拟DOM、组件系统等“黑科技”，但底层逻辑一脉相承。

五、现代Vue开发：Composition API与状态管理

Vue 3的Composition API让代码组织更灵活，像玩乐高：

// 逻辑复用：抽离计数器功能
function useCounter() {
  const count = ref(0);
  const double = computed(() => count.value * 2);
  const increment = () => count.value++;
  return { count, double, increment };
}

// 组件中随意拼装
export default {
  setup() {
    const { count, double, increment } = useCounter();
    const { count: otherCount } = useCounter(); // 多个独立实例！
    return { count, double, increment, otherCount };
  }
}

对于复杂应用，需要Vuex或Pinia管理全局状态。比如用户登录信息，用Pinia实现：

// stores/user.js
export const useUserStore = defineStore('user', {
  state: () => ({ name: '', isLogin: false }),
  actions: {
    async login(form) {
      const user = await api.login(form);
      this.name = user.name;
      this.isLogin = true;
    }
  }
});

// 组件中直接使用
const store = useUserStore();
store.login({ username: '摸鱼大师', password: '123456' });