框架

MVVM、MVC

MVVM（Model-View-ViewModel）和 MVC（Model-View-Controller）是两种常见的前端架构模式。

MVC：

Model：管理数据逻辑，如数据获取、存储、验证
View：负责 UI 界面展示
Controller：处理用户输入，协调 Model 和 View。如更新 Model 后通知 View 刷新

数据流向：用户操作 → Controller → 更新 Model → Controller 通知 View → View 更新。

MVVM：

Model：与 MVC 中的 Model 职责相同
View：仅负责 UI 展示，不处理逻辑
ViewModel：作为 View 的抽象，通过数据绑定与 View 自动同步（如双向绑定）；封装业务逻辑和状态

数据流向：用户操作 → ViewModel → 更新 Model → 数据绑定自动同步到 View。

单页面应用和多页面应用

单页应用 SPA

优点：页面切换快
- 页面每次切换跳转时，页面局部刷新，JS、CSS 等公共资源仅加载一次
缺点：
- 首屏时间慢
  - 首屏时需要请求 HTML，要加载公共资源
- SEO 效果差
  - 搜索引擎只认识 HTML 里的内容，不认识 JS 的内容，而单页应用的内容都是靠 JS 渲染生成出来的

多页应用 MPA

优点：
- 首屏时间快
  - 访问页面的时候，发送一个 HTTP 请求返回一个 HTML，页面就会展示出来
- SEO 效果好
  - 搜索引擎通过识别 HTML 内容来给网页排名
缺点：页面切换慢
- 多页面跳转需要刷新所有资源

命令式、声明式

命令式：是一种关注过程的编程范式，描述了完成一个功能的详细步骤

声明式：是一种关注结果的编程范式，不关注完成一个功能的详细步骤。如 vue 中的 <div>{{ msg }}</div>

在性能上，命令式比声明式更好。声明式需要编译
在开发体验和可维护性上，声明式比命令式更好

运行时、编译时

运行时

编译时

<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <script src="https://unpkg.com/vue@3.2.36/dist/vue.global.js"></script>
</head>
<body>
  <div id="app"></div>
</body>
<script>
  // 运行时
  // const { render, h } = Vue;
  // const vnode = h(
  //   'div',
  //   {
  //     class: 'test'
  //   },
  //   'hello render'
  // );
  // const container = document.querySelector('#app');
  // render(vnode, container);

  // 自己实现
  // const vNode = {
  //   type: 'div',
  //   props: {
  //     class: 'test'
  //   },
  //   children: 'hello world'
  // };
  // function render(vnode) {
  //   const el = document.createElement(vnode.type);
  //   el.className = vnode.props.class;
  //   el.textContent = vnode.children;
  //   document.getElementById('app').append(el);
  // }
  // render(vNode);

  // 编译器
  const { compile, createApp } = Vue;
  const template = `<div class="test">hello world</div>`;
  const renderFn = compile(template);
  const app = createApp({
    render: renderFn
  });
  app.mount('#app');
</script>

MVVM、MVC​

单页面应用和多页面应用​

单页应用 SPA​

多页应用 MPA​

命令式、声明式​