一 ： 什么是双向绑定：

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

<template>
  <div>
    <h1>
      {{ msg }}
    </h1>
    <input type="text" v-model="msg">
  </div>
</template>

<script>

export default {

  data() {
    return {
      msg: '双向绑定'
    }
  },

}
</script><template>
  <div>
    <h1 class="home">
      {{ msg }}
    </h1>
    <input type="text" :value="msg" @input="change">
  </div>
</template>

<script>

export default {

  data() {
    return {
      msg: '双向绑定'
    }
  },
  methods: {
    change(event) {
      this.msg = event.target.value
    }
  }

}
</script>

利用vue中的语法糖 v-modle可以轻松地实现双向绑定，在我们更新data数据的时候input框里的内容随之改变，当我们更新input框时data中的数据也改变，这就是最简单的双向绑定的实现。

二 ：v-modle 的基本原理

<template>
  <div>
    <h1 class="home">
      {{ msg }}
    </h1>
    <input type="text" :value="msg" @input="change">
  </div>
</template>

<script>

export default {

  data() {
    return {
      msg: '双向绑定'
    }
  },
  methods: {
    change(event) {
      this.msg = event.target.value
    }
  }

}
</script>

其实对v-modle 做拆分就是分为两个部分，

1 ：将data中的数据利用v-bind绑定到输入框的value属性上。语法糖 ‘ ： ’ 2 ：利用输入框的input事件，结合event.target.value（输入框当前最新的值）修改msg

三 ：双向绑定的底层原理

上述的实现方式只是基于vue，对v-modle 进行的简单原理拆分，其实双向绑定的核心是利用object.defineproperty方法去设置数据，并结合vue的发布和订阅模式

1 object.defineproperty方法介绍 ：

object.defineproperty（参数1，参数2，{

set ：function(){}, get ：function(){} }）

参数1 : 要给哪个对象设置属性

参数2 ：属性名称是啥

参数3 ：对象，封装set 和 get 方法

<template>
  <div>
    <button @click="change">点我</button>
  </div>
</template>

<script>

export default {

  data() {
    return {
      book: {
        age: 18,


      },
      cover: ""

    }
  },
  methods: {
    change() {
      this.book.cover = 'nba'
      console.log(book.cover);
    }

  },
  mounted() {
    Object.defineProperty(this.book, 'cover', {
      set: function (value) {
        console.log('检测到数据被修改了 :' + value);
        cover = value
      },
      get: function (value) {
        console.log('检测到读取数据了 :' + value);
        return " << '+cover+' >> "

      }

    })
  }

}
</script>

用 set 设置数据绑定，get获取设置的数据，这里 Object.defineProperty（）方法会出现数据劫持，也就是get返回值决定了set里设置的数据绑定的形式。

面试回答 ： vue中双向绑定用到了Object.defineProperty（）方法，这个方法可以检测到数据的变化，并通知dom更新，在该方法中有set可以绑定数据，get返回数据，并且用到该方法具有数据劫持的特点，结合vue的发布订阅模式共同实现双向绑定。