Skip to content

Vue介绍

参考

https://libusi.blog.csdn.net/article/details/134849673

概述

什么是MVVM(Model-View-ViewModel)

MVVM源自于经典的MVC(Model-View-Controller)模式。

MVVM的核心是ViewModel层,负责转换Model中的数据对象来让数据变得更容易管理和使用。其作用如下:

  1. 该层向上与视图层进行双向数据绑定
  2. 向下与Model层通过接口请求进行数据交互

为什么MVVM

  1. 低耦合:视图(View)可以独立于Model变化和修改,一个ViewModel可以绑定到不同的View上,当View变化的时候Model可以不变,当Model变化的时候View也可以不变。
  2. 可复用:可以把一些视图逻辑放在一个ViewModel里面,让很多View重用这段视图逻辑。
  3. 独立开发:开发人员可以专注于业务逻辑和数据的开发(ViewModel),设计人员可以专注于页面设计。
  4. 可测试:界面素来是比较难以测试的,而现在测试可以针对ViewModel来写。

MVVM组成部分

View

View是视图层, 也就是用户界面。前端主要由HTH L和csS来构建, 为了更方便地展现vi eu to del或者Hodel层的数据, 已经产生了各种各样的前后端模板语言, 比如FreeMarker,Thyme leaf等等, 各大MV VM框架如Vue.js.Angular JS, EJS等也都有自己用来构建用户界面的内置模板语言。

Model

Model是指数据模型, 泛指后端进行的各种业务逻辑处理和数据操控, 主要围绕数据库系统展开。这里的难点主要在于需要和前端约定统一的接口规则

ViewModel

ViewModel是由前端开发人员组织生成和维护的视图数据层。在这一层, 前端开发者对从后端获取的Model数据进行转换处理, 做二次封装, 以生成符合View层使用预期的视图数据模型。

为什么Vue

Vue.js就是一个MVVM的实现者, 他的核心就是实现了DOM监听与数据绑定

  1. 轻量级, 体积小是一个重要指标。
  2. 移动优先。更适合移动端, 比如移动端的Touch事件
  3. 易上手,学习曲线平稳,文档齐全
  4. 吸取了Angular(模块化) 和React(虚拟DOM) 的长处, 并拥有自己独特的功能,如:计算属性
  5. 开源,社区活跃度高

学习路线

© 2025-甘草味道的博客