Vue 数据双向绑定原理 （适合初学者）

面试过程，经常会遇到面试官问到 v-model的实现原理，作为一个vue使用者，这是必须了解的。

上面是数据绑定原理的图：

1、view ------》model (视图变，引起数据改变）

    <div id="app">
      <p></p>
      <input type="text" />
    </div>
    <script src="vue.js"></script>
    <script>
      const data = {
        msg: 'ddd',
      }
      const input = document.querySelector('input')
      const p = document.querySelector('p')
      input.value = data.msg
      p.innerText = data.msg
      //注册addeventListener事件
      input.addEventListener('input', function () {
        console.log('input', input)
        data.msg = input.value
      })
      let result = data.msg
      Object.defineProperty(data, 'msg', {
        //劫持data中msg的改变
        get: function () {},
        //把新值赋予
        set(newValue) {
          result = newValue
          input.value = newValue
          p.innerText = newValue
        },
      })
    </script>

通过注册input.addEventListener事件来改变数据中的值（msg）

2.model-------》view 数据变，引起视图的改变

如何知道数据的改变两种方式：

a.ES5中数据劫持， object.defineproperty(对象名，属性，方法)。

b.针对于anjuangular，早期使用的脏数据检查机制（性能比较低）。