标签：Vue 4.1 MVVM 模式 js 视图 Model View

Vue.js 的介绍

Vue.js 的宫方文档中是这样介绍的：简单小巧的核心，渐进式的技术枝，足以应付任何规模的应用。

简单小巧指的是 Vue.js 压缩后仅有 17KB。渐进式（progressive）是指可以一步一步、阶段性地来使用 Vue.js，不必一开始就使用所有的技能点。

Vue.js 常见的高级功能

使用 Vue.js 可以让 Web 开发变得简单，同时也颠覆了传统的前端开发模式。Vue.js 提供了现代 Web 开发中常见的高级功能：

• 解耦视图与数据
• 可复用的组件
• 前端路由
• 状态管理
• 虚拟 DOM（Virtual DOM）

Vue.js 的 MVVM 模式

与知名的前端框架 Angular.js 等一样，Vue.js 在设计上也是使用的 MVVM (Model-View-ViewModel）模式 。

• Model：负责数据存储
• View：负责页面展示
• View：负责业务逻辑处理（比如 AJAX 请求等），对数据进行加工后交给视图展示。

MVVM 模式

MVVM 模式是将 View 的状态和行为抽象化，并将视图 UI 和业务逻辑分开。当然这些工作由 ViewModel 完成，它可以取出 Model 的数据，同时处理 View 中由于需要展示内容而涉及的业务逻辑。MVVM 模式的结构如下图所示。

使用 MVVM 模式开发的理由

• 稠合。视图（View）可以独立于 Model 变化和修改，一个 ViewModel 可以绑定到 MVVM 模式不同的 View 上，当 View 变化的时候 Model 可以不变，当 Model 变化的时候 View 也可以不变。
• 可重用性。可以把一些视图逻辑放在一个 ViewModel 里面，让多个 View 重用这些视图逻辑。
• 独立开发。开发人员可以专注于业务逻辑和数据的开发（ViewModel)，设计人员可以专注于页面设计 。

提示

MVVM 模式要解决的问题是将业务逻辑代码与视图代码完全分离，使它们各自的职责更加清晰，后期代码维护工作更加简单。

标签：Vue,4.1,MVVM,模式,js,视图,Model,View
来源： https://www.cnblogs.com/Huang-zihan/p/16365468.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。