vue 双向绑定原理

官网–https://cn.vuejs.org/v2/guide/reactivity.html

1、vue双向数据绑定是 通过 数据劫持 并结合 发布-订阅模式 的方法来实现的。 也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变。
2、其中 数据劫持 是通过 Object.defineProperty() 方法实现的。vue 在内部会把定义在 data 中的属性通过这个方法全部转为 getter/setter。

上图中，每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依赖。之后当依赖项的 setter（发布者发布数据） 触发时，会通知 watcher（消息中心Broker），从而使它关联的组件重新渲染。

发布订阅模式----https://blog.csdn.net/weixin_43842373/article/details/121975015?spm=1001.2014.3001.5501

检测变化的注意事项

由于数组和对象是引用类型，Vue 不能检测数组和对象的变化。但是依然可以通过一些特殊方法来解决这个问题。

对于对象

Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的。例如：

var vm = new Vue({
  data:{
    a:1	// 响应式
  }
})
vm.b = 2	// 非响应式

对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property。但是，可以使用 Vue.set(object, propertyName, value) 方法向 嵌套对象 添加响应式 property。如下：

this.$set(vm.someObject, 'b', 2)

有时你可能需要为已有对象赋值 多个 新 property，比如使用 Object.assign() 或 _.extend()。但是，这样添加到对象上的新 property 不会触发更新。在这种情况下，你应该用原对象与要混合进去的对象的 property 一起创建一个新的对象。

this.someObject = Object.assign({}, this.someObject, { a: 1, b: 2 })

对于数组

Vue 不能检测以下数组的变动：

1、当你利用索引直接设置一个数组项时，例如：this.items[indexOfItem] = newValue
2、当你修改数组的长度时，例如：this.items.length = newLength

例如：

var vm = new Vue({
  data: {
    items: ['a', 'b', 'c']
  }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2 // 不是响应性的

对于第一类问题，可以用一下两种方案解决：

this.$set(vm.items, indexOfItem, newValue)
// 或
this.items.splice(indexOfItem, 1, newValue)

对于第二类问题：

this.items.splice(newLength)

实现一个简单的数据双向绑定

<input type="text">
  <p></p>
  <script>
    window.onload = function () {
      const input = document.querySelector('input')   // 发布者
      const p = document.querySelector('p')   // 订阅者
      window.data = ''  // 要双向绑定的数据

      Object.defineProperty(window, 'data', {
        get: function() {
          return data
        },
        set: function(value) {  // 数据劫持，订阅者函数，更新 DOM
          p.innerText = value
        }
      })

      input.onkeyup = (e) => {   // onkeyuo与setter 共同形成事件中心 broker
        window.data = input.value // 发布数据
      }
    }
  </script>