vue双向数据绑定原理

vue双向数据绑定的底层原理：
object这个对象有个方法，叫做defineProperty，当数据发生访问或者修改，它都能够监测到，就是做到了一个数据劫持。
一旦数据变化，他就会立即通知相关DOM更新页面，这个就用到了发布订阅者模式

<!-- Object.defineProperty -->
<!-- 数据劫持 -->
<!-- 发布订阅者模式 -->
<script>
  var book = {};
  var name = "";
  // 参1: 要给哪个对象设置属性
  // 参2: 属性名称是啥
  // 参3: 对象, 封装set和get方法
  Object.defineProperty(book, "name", {
    // 一旦修改了属性, 就会走到set方法中, value表示修改的内容
    // book.name = "xxx"
    set: function (value) {
      name = value;
      // 检测到数据变化的时候, 更新一下dom
      $("h1").text(value);
      $("input").val(value)
    },

    // 一旦读取属性, 就会走到get方法中
    // book.name
    get: function (value) {
      return name;
    }
  });

  //input事件: 只要文本框内容发生了变化, 就会执行回调函数
  $("input").on("input", function () {
    book.name = $(this).val(); //返回值, 决定了将来调用book.name返回的值
  });

  var num = 0;
  $("button").click(function () {
    book.name = num++;

    console.log(book.name);
  });
</script>

注：
1.发布订阅者模式

2.双向数据绑定指令：v-model
3.从浅层次上来说，v-model是 v-bind（数据变->文本框变） 和 v-on的change事件（文本框变->数据变） 的结合体