vue个人学习基础总结（二）

vue的响应式原理

• Vue的数据响应主要是依赖了原生的Object.defineProperty()

• vue文档

  当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。

  即vue的实例data的所有property都会利用原生的Object.defineProperty绑定上getter/settet属性

• vue的计算属性computers包括其缓存数据依赖等均来自于此

  Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是 Vue 不支持 IE8 以及更低版本浏览器的原因。

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

  • 

  • 注意

    • 由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。但还是有一些办法来回避这些限制并保证它们的响应性

    • 对象

      • Vue 无法检测 property 的添加或移除。由于 Vue 会在初始化实例时对 property 执行 getter/setter 转化，所以 property 必须在 data 对象上存在才能让 Vue 将它转换为响应式的，对于已经创建的实例，Vue 不允许动态添加根级别的响应式 property

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

      • 需要通过Vue.set(object, propertyName, value)方法向嵌套对象添加响应式property，或者vue实例方法vm.$set也是全局Vue.set方法的别名

        Vue.set(vm.someObject, 'b', 2)
        // 或者
        this.$set(this.someObject,'b',2)
        

    • 数组

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

        • 当你利用索引直接设置一个数组项时，例如：vm.items[indexOfItem] = newValue，即在data中存放数组，数组中的数据不是响应式的
        • 当你修改数组的长度时，例如：vm.items.length = newLength

      • 对于设置数组项可以用两种方法解决

        • // Vue.set全局方法
          Vue.set(vm.items, indexOfItem, newValue)
          // vm.$set 实例方法
          vm.$set(vm.items, indexOfItem, newValue)
          
          // Array.prototype.splice原生修改数组方法
          vm.items.splice(indexOfItem, 1, newValue) // 从第几个开始删除几个插入什么
          

      • 对于设置数组长度

        • vm.items.splice(newLength)
          

• Vue 在更新 DOM 时是异步执行的

  • 侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。如果同一个 watcher 被多次触发，只会被推入到队列中一次。