Vue前端开发：单向数据绑定

Vue是一个典型的 MVVM 框架，那什么是 MVVM 框架?它与MVC 框架相比而言，有了哪些改变?单向数据绑定在这个框架中是如何体现的?带着这些问题，我们进入接下来的内容学习。

一、MVC 框架演变过程

严格来说，MVC框架是一种设计思想，早期的前端技术MVC 结构来源于后端语言，如Java、C#语言，这些语言具有完整和成熟的 MVC 框架体系;随着前端处理业务的逻辑越来越复杂，便借鉴后端语言这种MVC框架体系，形成前端技术特有的MVC 框架。

它的结构与后端语言的MVC 一样，由Model、View、Controller三部分组成，它们各司其职，Model简称 M，数据模型层，用于定义数据结构和存储数据源;View 简称 V，视图层，用于展示数据界面和响应页面交互;Controller 简称 C，控制层，用于监听数据变化并处理页面交互逻辑，它们三者的关系如下图3-4所示。

但随着业务逻辑越来越复杂，使得Controller 层代码量也越来越多，显得冗余而无序，维护起来非常困难，这时，需要从Controller 层抽离出数据和逻辑处理部分，由专门的一个对象进行管理和维护，而这个对象，就是ViewModel。

通过抽离出ViewModel对象，使用逻辑层的结构更加清晰，ViewModel负责处理视图和数据逻辑关系，并双向绑定View和Model，使得ViewModel 对象更象一座桥梁，用于衔接 View 和 Model 层两端，它们的关系如下图3-5所示。

在示意图3-5中，我们不难看出，原来 Controller 层需要处理所有的数据交互和业务逻辑，而改成 ViewModel 层后，则只需要处理针对 View 层的数据交互和业务逻辑，并且这种处理后的绑定是双向的，这样就使 View 和 Model 层的数据同步是完全自动的，用户无需手动操作DOM，只需关注业务逻辑。

二、单向绑定

在MVVM 框架下，Vue 的数据绑定都是双向的，但也能实现单向的数据绑定，所谓"单向"是针对"双向"而言的，也就是一个方向，即从数据源获取数据，到视图层中显示数据一个方向，在显示时并不会改变源数据，这种单向绑定的方式常用于绑定视图层中元素固定显示的内容、元素属性中，实例如下。

实例：数据单向绑定

1. 功能描述

在新建的组件中，添加一个div 和一个span元素，并使用单向数据绑定的方式，显示span元素的内容和控制元素的类别样式。

2. 实现代码

在项目components 文件夹的ch3子文件夹中，添加一个名为"OneWay"的.vue文件，在文件中加入如清单3-3所示代码。

代码清单3-3 OneWay.vue代码

typescript 复制代码

<template>
  <div>
    <div>
      姓名：<span v-bind:class="fs">{{ name }}</span>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      name: "李小明",
      fs: "fs",
    };
  },
};
</script>
<style scoped>
.fs {
  font-size: 26px;
  color: red;
}
div {
  margin: 10px;
  text-align: left;
}
</style>

3. 页面效果

保存代码后，页面在Chrome浏览器下执行的页面效果如图3-6所示。

4. 源码分析

在组件的实例化的配置对象中，先分别定义了"name"和"fs"对象属性，作为视图层绑定的数据源，然后在视图中通过 v-bind 指令绑定元素的class属性值，使用双大括号绑定元素显示的内容，这种绑定的方式就是单向的数据绑定，最后，当数据源发生变更后，视图层将自动同步变更后的数据。