vue数据双向绑定原理 通俗易懂_vue的数据绑定怎么实现[通俗易懂]

vue 双向绑定原理

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

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

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

vue数据双向绑定原理

检测变化的注意事项

由于数组和对象是引用类型，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>

今天的文章vue数据双向绑定原理 通俗易懂_vue的数据绑定怎么实现[通俗易懂]分享到此就结束了，感谢您的阅读。