https://fe-interview.pangcy.cn/tags/mvvm/Recent content in MVVM on ZiYang FrontEnd InterviewHugoen-usThu, 06 Mar 2025 13:07:39 +0800https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-07/Tue, 04 Mar 2025 07:00:27 +0000https://fe-interview.pangcy.cn/docs/framework/vue2/vue2-07/<h3 id="考察点分析">考察点分析 <a href="#%e8%80%83%e5%af%9f%e7%82%b9%e5%88%86%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><p><strong>核心能力维度</strong>：框架设计原理、数据流管理能力、架构模式理解深度<br> <strong>技术评估点</strong>：</p> <ol> <li>架构层级的职责边界划分</li> <li>数据流向的管控方式（单向/双向）</li> <li>视图层与数据层的解耦机制</li> <li>框架层面的自动化能力差异</li> <li>状态变更的传播路径</li> </ol> <hr> <h3 id="技术解析">技术解析 <a href="#%e6%8a%80%e6%9c%af%e8%a7%a3%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h3><h4 id="关键知识点层级">关键知识点层级 <a href="#%e5%85%b3%e9%94%ae%e7%9f%a5%e8%af%86%e7%82%b9%e5%b1%82%e7%ba%a7" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><p>MVVM设计思想 &gt; 数据绑定机制 &gt; 观察者模式 &gt; 命令模式 &gt; 中介者模式</p> <h4 id="架构原理剖析">架构原理剖析 <a href="#%e6%9e%b6%e6%9e%84%e5%8e%9f%e7%90%86%e5%89%96%e6%9e%90" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><p><strong>MVC</strong>（Model-View-Controller）：</p> <ul> <li>Controller作为业务逻辑入口，接收用户事件</li> <li>Model变更通过观察者模式通知View更新（Passive View模式）</li> <li>典型数据流：View -&gt; Controller -&gt; Model -&gt; View</li> </ul> <p><strong>MVP</strong>（Model-View-Presenter）：</p> <ul> <li>Presenter完全接管View的展示逻辑</li> <li>View通过接口与Presenter通信</li> <li>严格单向数据流：View事件 -&gt; Presenter -&gt; Model -&gt; Presenter -&gt; View</li> </ul> <p><strong>MVVM</strong>（Model-View-ViewModel）：</p> <ul> <li>ViewModel通过数据绑定与View自动同步</li> <li>双向绑定实现：View输入自动更新ViewModel，ViewModel变更自动反映到View</li> <li>数据流形成闭环：View ↔ ViewModel ↔ Model</li> </ul> <h4 id="核心差异点">核心差异点 <a href="#%e6%a0%b8%e5%bf%83%e5%b7%ae%e5%bc%82%e7%82%b9" class="anchor" aria-hidden="true"><i class="material-icons align-middle">link</i></a></h4><table> <thead> <tr> <th>维度</th> <th>MVC</th> <th>MVP</th> <th>MVVM</th> </tr> </thead> <tbody> <tr> <td>视图依赖</td> <td>强依赖Controller</td> <td>接口依赖</td> <td>数据绑定</td> </tr> <tr> <td>测试复杂度</td> <td>高（需模拟视图）</td> <td>中</td> <td>低</td> </tr> <tr> <td>代码量</td> <td>多（胶水代码）</td> <td>较多</td> <td>少</td> </tr> <tr> <td>数据流向</td> <td>单向循环</td> <td>严格单向</td> <td>双向自动</td> </tr> </tbody> </table> <p><strong>常见误区</strong>：</p>