Vue2.0
MVC、MVVM
MVC
MVC 模式同时提供了对 HTML、CSS 和 JavaScript 的完全控制。
Model(模型)是应用程序中用于处理应用程序数据逻辑的部分。
通常模型对象负责在数据库中存取数据。
View(视图)是应用程序中处理数据显示的部分。
通常视图是依据模型数据创建的。
Controller(控制器)是应用程序中处理用户交互的部分。
通常控制器负责从视图读取数据,控制用户输入,并向模型发送数据。
-
图示
-
M
- 模型(数据层如数据库)
-
V
- 视图(视图层、HTML页面)
-
C
- 控制器(业务逻辑层)
-
-
优点
-
耦合性低
视图层和业务层分离,这样就允许更改视图层代码而不用重新编译模型和控制器代码,同样,一个应用的业务流程或者业务规则的改变只需要改动MVC的模型层即可。因为模型与控制器和视图相分离,所以很容易改变应用程序的数据层和业务规则。
模型是自包含的,并且与控制器和视图相分离,所以很容易改变应用程序的数据层和业务规则。如果把数据库从MySQL移植到Oracle,或者改变基于RDBMS数据源到LDAP,只需改变模型即可。一旦正确的实现了模型,不管数据来自数据库或是LDAP服务器,视图将会正确的显示它们。由于运用MVC的应用程序的三个部件是相互独立,改变其中一个不会影响其它两个,所以依据这种设计思想能构造良好的松耦合 -
重用性高
随着技术的不断进步,需要用越来越多的方式来访问应用程序。MVC模式允许使用各种不同样式的视图来访问同一个服务器端的代码,因为多个视图能共享一个模型,它包括任何WEB(HTTP)浏览器或者无线浏览器(wap),比如,用户可以通过电脑也可通过手机来订购某样产品,虽然订购的方式不一样,但处理订购产品的方式是一样的。由于模型返回的数据没有进行格式化,所以同样的构件能被不同的界面使用。例如,很多数据可能用HTML来表示,但是也有可能用WAP来表示,而这些表示所需要的命令是改变视图层的实现方式,而控制层和模型层无需做任何改变。由于已经将数据和业务规则从表示层分开,所以可以最大化的重用代码了。模型也有状态管理和数据持久性处理的功能,例如,基于会话的购物车和电子商务过程也能被Flash网站或者无线联网的应用程序所重用。
-
生命周期成本低
MVC使开发和维护用户接口的技术含量降低。
-
部署快
使用MVC模式使开发时间得到相当大的缩减,它使程序员(Java开发人员)集中精力于业务逻辑,界面程序员(HTML和JSP开发人员)集中精力于表现形式上。
-
可维护性高
分离视图层和业务逻辑层也使得WEB应用更易于维护和修改。
-
有利软件工程化管理
由于不同的层各司其职,每一层不同的应用具有某些相同的特征,有利于通过工程化、工具化管理程序代码。控制器也提供了一个好处,就是可以使用控制器来联接不同的模型和视图去完成用户的需求,这样控制器可以为构造应用程序提供强有力的手段。给定一些可重用的模型和视图,控制器可以根据用户的需求选择模型进行处理,然后选择视图将处理结果显示给用户。
-
-
缺点
- 没有明确的定义
- 不适合小型,中等规模的应用程序
- 增加系统结构和实现的复杂性
- 视图与控制器间的过于紧密的连接
- 视图对模型数据的低效率访问
- 一般高级的界面工具或构造器不支持模式
MVVM
MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为抽象化,让我们将视图 UI 和业务逻辑分开。当然这些事 ViewModel 已经帮我们做了,它可以取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑。
-
MVVM(Model–View–Viewmodel)是一种软件架构模式
-
M
-
模型
- 数据模型与持久化抽象模型。数据模型很好理解,就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层,是因为MVVM诞生之初就没有对这块进行很细致的描述。按照经验,我们通常把数据库、文件操作封装成Model,并对外提供操作接口。(有些公司把数据存取操作单拎出来一层,称之为DataAdapter层,所以在业内会有很多MVVM的变种,但其本质上都是MVVM)
-
-
V
-
视图
- 视图展示。包含UIView以及UIViewController,View层是可以持有ViewModel的。
-
-
VM
-
视图模型
- 视图适配器。暴露属性与View元素显示内容或者元素状态一一对应。一般情况下ViewModel暴露的属性建议是readOnly的,至于为什么,我们在实战中会去解释。还有一点,ViewModel层是可以持有Model的。
-
-
Binder
- MVVM的灵魂。可惜在MVVM这几个英文单词中并没有它的一席之地,它的最主要作用是在View和ViewModel之间做了双向数据绑定。如果MVVM没有Binder,那么它与MVC的差异不是很大。
-
-
优点
- 低耦合
- 可重用性
- 独立开发
- 可测试
-
缺点
- 调用复杂度增加
- DEBUG困难
- 数据双向绑定不利于View部分的代码复用
- 类会增多
环境搭建
单页面应用
- 直接引用CDN链接
使用Cli搭建本地开发
-
1、全局安装cli
- npm install -g @vue/cli
yarn global add @vue/cli
- npm install -g @vue/cli
-
2、初始化项目
- vue create hello-world
-
3、进入项目
- cd hello-world
-
4、安装依赖
- npm/ cnpm install
yarn install
- npm/ cnpm install
-
5、启动项目
- npm run serve
yarn run serve / yarn serve
- npm run serve
生命周期
beforeCreate
-
在实例初始化之后,数据观测(data observer)和event/watcher 事件配置之前调用
- el (DOM) // undefined
data // undefined
message // undefined
- el (DOM) // undefined
created
-
实例已经已经创建完成之后被调用。在这一步,实例一完成了以下配置:数据观测(data observer), 属性和方法的运算,watch/event 事件回调,但是挂载阶段还未开始,$el 属性目前还是undefined
- el (DOM) // undefined
data // 已被初始化
message //已被初始化
- el (DOM) // undefined
beforeMount
-
在挂载开始直接被被调用;相关的render韩式首次被调用。该钩子在服务器端渲染期间不被调用
- el (DOM) // 已被初始化
data // 已被初始化
message //已被初始化
- el (DOM) // 已被初始化
mounted
-
el 被薪创建的vm. e l 替 换 , 并 挂 载 到 实 例 上 去 之 后 调 用 该 钩 子 , 如 果 r o o t 实 例 挂 载 了 一 个 文 档 内 元 素 , 当 m o u n t e d 被 调 用 时 v m . el 替换,并挂载到实例上去之后调用该钩子,如果root 实例挂载了一个文档内元素,当mounted 被调用时 vm.