学姐半夜不会vue，跑来我家问问题——Vue之双向数据绑定

本文链接：https://blog.csdn.net/weixin_50477991/article/details/117638641

前言

众所周知，Vue技术栈已经涵盖了大部分厂家，这也成为了前端程序员不可避开的一项工具，面试中也不容错过。

Vue的强大之处有两点：

双向数据绑定
组件机制

双向数据绑定(MVVM)

而今天我们则主要针对一下双向数据绑定，毕竟学姐已经问到头上来了。

MVVM

要说双向数据绑定，我们就不得不提到MVVM。

MVVM是一种软件架构模式，而Vue是一个MVVM视图层框架，可以构建出复杂的单页面应用程序。

Vue与原生的JS显著的区别是不再对DOM节点进行直接操作。而是通过对数据操作来改变试图。

MVVM的组成
- Modal - 数据模型
- View - 数据模型
- ViewModal - 石头模型（是Modal和View的通信桥梁）
下面是图解：

什么是双向数据绑定？

双向数据绑定，顾名思义，当数据发生变化时，视图（客户所看到的页面）也就发生变化，当视图发生变化时，数据也会跟着同步变化。值得注意的是，该机制议定书对于UI控件来说的，非UI控件不会涉及。

UI控件：即User Interface（用户界面）的简称。
就是HTML中常见的input等可以传参的标签。

为什么要实现？

方便好用。
绑定流程及如何使用
- 通过v-model来实现双向数据绑定
- 视图层->数据模型（v -> vm -> m）
  - 监听input.value发生变化
  - 获取value的值
  - 将value值传递给数据模型中对应的字段
- 数据模型->视图层（m -> vm -> m）

        let obj = {};
        Object.defineProperty(obj,"msg",{
          get() {
            return 
          },
          //核心内容，通过set监听到数据模型中数据的改变
          //将改变的数据赋值给视图层对应的标签
          set(val) {
            console.log(val);
            document.getElementById("form_msg").value(val);
          }
        })
        this.obj.msg = "hello vue";

使用Object.defineProperty()来定义属性的set函数，属性被赋值的时候，修改Input的value值。

下面是范例表单代码：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../js/vue.js"></script>
</head>
<body>
  <div id="app">
    {{categoryInfo}} 
    <br>
    name:<input type="text" v-model.trim="categoryInfo.name"><br>
    parentId:<input type="text" v-model.number="categoryInfo.parentId"><br>
    address:<select v-model="categoryInfo.address">
      <option value="北京">北京</option>
      <option value="上海">上海</option>
      <option value="苏州">苏州</option>
    </select><br>
    gender: <input type="radio" value="male" v-model="categoryInfo.gender">male
    <input type="radio" value="female" v-model="categoryInfo.gender">female<br>
    hobby: <input type="checkbox" value="basket" v-model="categoryInfo.hobby">basket
    <input type="checkbox" value="singing" v-model="categoryInfo.hobby">singing
    <input type="checkbox" value="dance" v-model="categoryInfo.hobby">dance<br>
    introduce: <textarea v-model="categoryInfo.introduce" cols="30" rows="10" placeholder="multiple lines"></textarea><br>
    <button @click="clickHandler">改变数据</button>
  </div>
</body>
<script>
  new Vue({
    el: "#app",
    data: {
      categoryInfo: {
        hobby: []
      }
    },
    methods: {
      //ajax
      saveOrUpdate() {
        let data = {name: this.msg};
        console.log(data);
      },
      clickHandler() {
        this.msg = "hello vue";
      }
    }
  });
</script>
</html>

效果图：
在这里插入图片描述

5.双向数据绑定的原理（面试）

Vue 数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的。具体实现过程：

我们已经知道实现数据的双向绑定，首先要对数据进行劫持监听，所以我们需要设置一个监
听器 Observer，用来监听所有属性。如果属性发上变化了，就需要告诉订阅者 Watcher 看是
否需要更新。因为订阅者是有很多个，所以我们需要有一个消息订阅器 Dep 来专门收集这
些订阅者，然后在监听器 Observer 和订阅者 Watcher 之间进行统一管理的。接着，我们还
需要有一个指令解析器 Compile，对每个节点元素进行扫描和解析，将相关指令对应初始化
成一个订阅者 Watcher，并替换模板数据或者绑定相应的函数，此时当订阅者 Watcher 接收
到相应属性的变化，就会执行对应的更新函数，从而更新视图。

因此接下去我们执行以下 3个步骤，实现数据的双向绑定：

1.实现一个监听器 Observer，用来劫持并监听所有属性，如果有变动的，就通知订阅者。

2.实现一个订阅者 Watcher，可以收到属性的变化通知并执行相应的函数，从而更新视图。

3.实现一个解析器 Compile，可以扫描和解析每个节点的相关指令，并根据初始化模板数据

以及初始化相应的订阅器。

流程图如下：
在这里插入图片描述