【Vue.js】015-Vue：Vue中的MVVM、Vue的options选项

太过爱你忘了你带给我的痛 2023-10-05 02:52 6阅读 0赞

# **目录** #

三、Vue中的MVVM

1、MVVM概述

2、Vue中的MVVM

结构图示：

实例图示：

四、Vue的options选项

1、参考文档

2、先掌握三个

el：

data：

methods：

补充：

--------------------

# 三、Vue中的MVVM #

## 1、MVVM概述 ##

MVVM（Model–View–Viewmodel）是一种软件架构模式；

MVVM有助于将**图形用户界面**的开发与业务逻辑或**后端逻辑（数据模型）**的开发分离开来，这是通过**置标语言**或**GUI代码**实现的。MVVM的视图模型是一个**值转换器**， 这意味着**视图模型**负责从模型中暴露（转换）数据对象，以便轻松管理和呈现对象。在这方面，视图模型比视图做得更多，并且处理大部分视图的显示逻辑。 视图模型可以实现**中介者模式**，组织对视图所支持的用例集的后端逻辑的访问；

MVVM是马丁·福勒的**PM（Presentation Model）设计模式**的变体。 MVVM以相同的方式抽象出视图的状态和行为,但PM以不依赖于特定用户界面平台的方式抽象出视图（创建了视图模型）；

**MVVM和PM都来自MVC模式；**

MVVM由微软架构师Ken Cooper和Ted Peters开发，通过利用WPF（微软.NET图形系统）和Silverlight（WPF的互联网应用派生品）的特性来简化用户界面的事件驱动程序设计。 微软的WPF和Silverlight架构师之一John Gossman于2005年在他的博客上发表了MVVM；

MVVM也被称为model-view-binder，特别是在不涉及.NET平台的实现中。ZK（Java写的一个Web应用框架）和KnockoutJS（一个JavaScript库）使用model-view-binder；

**简化：MVVM是MVC的改进版；**

**MVC**中的**M**就是单纯的从网络获取回来的数据模型，**V**指的我们的视图界面，而**C**就是我们的ViewController；

在其中，**ViewController**负责**View**和**Model**之间调度，**View**发生交互事件会通过target-action或者delegate方式回调给**ViewController**，与此同时**ViewController**还要承担把**Model**通过KVO、Notification方式传来的数据传输给**View**用于展示的责任。**随着业务越来越复杂，视图交互越复杂，导致Controller越来越臃肿，负重前行。脏活累活都它干了，到头来还一点不讨好。福报修多了的结果就是，不行了就重构你，重构不了就换掉你；**

来一张斯坦福老头经典的MVC架构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70][]

所以为了解决这个问题，MVVM就闪亮登场了。他把View和Contrller都放在了View层（相当于把Controller一部分逻辑抽离了出来），Model层依然是服务端返回的数据模型。**而ViewModel充当了一个UI适配器的角色，也就是说View中每个UI元素都应该在ViewModel找到与之对应的属性。除此之外，从Controller抽离出来的与UI有关的逻辑都放在了ViewModel中，这样就减轻了Controller的负担；**

我简单的画了下MVVM的架构图：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1][]

从以上的架构图中，我们可以很清晰的梳理出各自的分工；

**View层**：**视图展示。**包含**UIView**以及**UIViewController**，**View层是可以持有ViewModel的**；

**ViewModel层**：**视图适配器。**暴露属性与View元素显示内容或者元素状态一一对应。一般情况下ViewModel暴露的属性建议是readOnly的，至于为什么，我们在实战中会去解释。还有一点，**ViewModel层是可以持有Model的**；

**Model层**：**数据模型与持久化抽象模型。**数据模型很好理解，就是从服务器拉回来的JSON数据。而持久化抽象模型暂时放在Model层，是因为MVVM诞生之初就没有对这块进行很细致的描述。**按照经验，我们通常把数据库、文件操作封装成Model，并对外提供操作接口。**（有些公司把数据存取操作单拎出来一层，称之为**DataAdapter层**，所以在业内会有很多MVVM的变种，但其本质上都是MVVM）；

**Binder**：**MVVM的灵魂。**可惜在MVVM这几个英文单词中并没有它的一席之地，它的最主要作用是在**View**和**ViewModel**之间做了**双向数据绑定**。如果MVVM没有Binder，那么它与MVC的差异不是很大；

## 2、Vue中的MVVM ##

### 结构图示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2][]

### 实例图示： ###

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3][]

# 四、Vue的options选项 #

## 1、参考文档 ##

[https://cn.vuejs.org/v2/api/\#][https_cn.vuejs.org_v2_api]选项-数据

## 2、先掌握三个 ##

### el： ###

**类型**：`string | Element`

**限制**：只在用 `new` 创建实例时生效；

**详细**：

提供一个在页面上已存在的 DOM 元素作为 Vue 实例的**挂载目标**。可以是 **CSS 选择器**，也可以是一个 **HTMLElement 实例**；

在实例挂载之后，元素可以用 `vm.$el` 访问；

如果在实例化时存在这个选项，实例将立即进入编译过程，否则，需要显式调用 `vm.$mount()` 手动开启编译；

**简化：用来决定vue实例所管理的是那个DOM元素；**

### data： ###

**类型**：`Object | Function`

**限制**：组件的定义只接受 `function`；

**详细**：

Vue 实例的数据对象。Vue 将会递归将 data 的 property 转换为 getter/setter，从而让 data 的 property 能够响应数据变化。**对象必须是纯粹的对象 (含有零个或多个的 key/value 对)**：浏览器 API 创建的原生对象，原型上的 property 会被忽略。大概来说，data 应该只能是数据 - 不推荐观察拥有状态行为的对象；

一旦观察过，你就无法在根数据对象上添加响应式 property。因此推荐在创建实例之前，就声明所有的根级响应式 property；

实例创建之后，可以通过 `vm.$data` 访问原始数据对象。Vue 实例也代理了 data 对象上所有的 property，因此访问 `vm.a` 等价于访问 `vm.$data.a`；

以 `_` 或 `$` 开头的 property **不会**被 Vue 实例代理，因为它们可能和 Vue 内置的 property、API 方法冲突。你可以使用例如 `vm.$data._property` 的方式访问这些 property；

当一个**组件**被定义，`data` 必须声明为返回一个**初始数据对象的函数**，因为组件可能被用来创建多个实例。如果 `data` 仍然是一个纯粹的对象，则所有的实例将**共享引用**同一个数据对象！通过提供 `data` 函数，每次创建一个新实例后，我们能够调用 `data` 函数，从而返回初始数据的一个全新副本数据对象；

如果需要，可以通过将 `vm.$data` 传入 `JSON.parse(JSON.stringify(...))` 得到深拷贝的原始数据对象；

**实例：**

var data = { a: 1 }
    
    // 直接创建一个实例
    var vm = new Vue({
      data: data
    })
    vm.a // => 1
    vm.$data === data // => true
    
    // Vue.extend() 中 data 必须是函数
    var Component = Vue.extend({
      data: function () {
        return { a: 1 }
      }
    })

注意，如果你为 `data` property 使用了箭头函数，则 `this` 不会指向这个组件的实例，不过你仍然可以将其实例作为函数的第一个参数来访问；

data: vm => ({ a: vm.myProp })

**简化：用来定义数据；**

### methods： ###

**类型**：`{ [key: string]: Function }`；

**详细**：

methods 将被混入到 Vue 实例中。可以直接通过 VM 实例访问这些方法，或者在指令表达式中使用。方法中的 `this` 自动绑定为 Vue 实例；

**注意：**

注意，**不应该使用箭头函数来定义 method 函数** (例如 `plus: () => this.a++`)。理由是箭头函数绑定了父级作用域的上下文，所以 `this` 将不会按照期望指向 Vue 实例，`this.a` 将是 undefined；

**示例：**

var vm = new Vue({
      data: { a: 1 },
      methods: {
        plus: function () {
          this.a++
        }
      }
    })
    vm.plus()
    vm.a // 2

**简化：用来定义函数；**

### 补充： ###

什么时候称为方法，什么时候成为函数？

方法：method；

函数：function；

在类中叫方法，在类外叫函数；

因为方法一般是实例的方法；

当然一般情况下是不需要区分的，只做了解；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210115192455540.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210115192536728.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20210115192602148.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20210115192644241.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzI5Njg5MzQz,size_16,color_FFFFFF,t_70
[https_cn.vuejs.org_v2_api]: https://cn.vuejs.org/v2/api/#