1、响应式和数据双向绑定的基本概念

1.1 什么是响应式？

响应式编程是一种面向数据流和变化传播的编程范式。这意味着可以在编程语言中很方便地表达静态或动态的数据流，而相关的计算模型会自动将变化的值通过数据流进行传播。

1.2 什么是数据双向绑定?

是指视图 View 的变化能实时地让数据模型 Model 发生变化，而数据的变化也能实时更新到视图层。既就是view的变化能反映到ViewModel上，ViewModel的变化能同步到view上

说了基本概念，我们就直接去探索其行为：直观上，数据再变化时不需要开发者去手动更新视图，视图会根据变化的数据 “自动” 进行更新。想要完成这个过程，需要做到已下几点。

• 要知道去收集视图依赖了哪些数据 。
• 感知被依赖数据的变化。
• 数据变化时，自动 “通知”需要更新的视图部分，并进行更新。

这个过程对应的技术概念如下

• 依赖收集
• 数据劫持/数据代理
• 发布/订阅模式

2、数据劫持/数据代理

感知数据变化的方法很直接，就是进行数据劫持或数据代理。可以通过Object.defineProperty这个方法来实现。

先来简单看下Object.defineProperty(obj,property,descriptor)这个方法。

参数一：obj 绑定属性的目标对象
参数二：property 绑定的属性名
参数三：descriptor 属性描述（配置），且此参数本身为一个对象
descriptor对象参数说明如下

• 属性值1：value 设置属性默认值
• 属性值2：writable 设置属性是否能够修改
• 属性值3：enumerable 设置属性是否可以枚举，即是否允许遍历
• 属性值4：configurable 设置属性是否可以删除或编辑
• 属性值5：get 获取属性的值
• 属性值6：set 设置属性的值

      let data = {
          name: 'fzs',
          info: {
            age: 18,
            driving: 2,
            familyTies: {
              maritalStatus: '已婚'
            }
          }
      }
      Object.keys(data).forEach(key => {
        let currentValue = data[key]
        Object.defineProperty(data, key, {
          enumerable: true, //
          configurable: false, // 声明了之后后面不能再手动改配置
          get() {
            console.log('你读取值得时候会触发我哦')
            return currentValue
          },
          set(newValue) {
            console.log('赋值操作会触发我，这是新赋值：' + newValue)
            currentValue = newValue
          }
        })
      })
      setTimeout(() => {
        console.log(data.name)
        data.name='hhh'
        data.info.age=30
        console.log(data);
      }, 500)

image.png

我们在setTimeout中触发了两次赋值两次读取值。但是为什么set才触发了一次，原因是我们的代码只是实现了一层Object.defineProperty对于嵌套引用类型数据结构 data.info我们也应该进行拦截。我们可以使用递归来实现，稍微改造一下

 let data = {
          name: 'fzs',
          info: {
            age: 18,
            driving: 2,
            familyTies: {
              maritalStatus: '已婚'
            }
          }
        }
        const observe = data => {
          // 跳过空值跟基础类型数据
          if (!data || typeof data !== 'object') {
            return
          }
          Object.keys(data).forEach(key => {
            let currentValue = data[key]
            observe(currentValue)
            Object.defineProperty(data, key, {
              enumerable: true, //
              configurable: false, // 声明了之后后面不能再手动改配置
              get() {
                console.log('你读取值得时候会触发我哦')
                return currentValue
              },
              set(newValue) {
                console.log('赋值操作会触发我，这是新赋值：' + newValue)
                currentValue = newValue
                // set的时候也递归一下，这样才能实现对复杂数据的观察
                observe(currentValue) 
              }
            })
          })
        }
        observe(data)
        setTimeout(() => {
          console.log(data.name)
          data.name = 'hhh'
          data.info.age = 30
          console.log(data)
        }, 500)
      }

使用了递归函数observe去实现，所以此时给第二层赋值的时候也触发了拦截

image.png

以上两段代码就简单实现了对数据的拦截，这就是很多框架实现的第一步。如果你了解java在面向对象中，创建类的时候，一般都会定义属性的get跟set，这样是为了方便数据拦截处理等。

2.1、监听数组变化

如果我们将上述数据中的某一项变为数组，如下所示：

let data = {
          name: 'fzs',
          info: {
            age: 18,
            driving: 2,
            familyTies: {
              maritalStatus: '已婚'
            },
            hobby:['play Games','Movies']
          }
        }
        const observe = data => {
          // 跳过空值跟基础类型数据
          if (!data || typeof data !== 'object') {
            return
          }
          Object.keys(data).forEach(key => {
            let currentValue = data[key]
            observe(currentValue)
            Object.defineProperty(data, key, {
              enumerable: true, //
              configurable: false, // 声明了之后后面不能再手动改配置
              get() {
                console.log('你读取值得时候会触发我哦')
                return currentValue
              },
              set(newValue) {
                console.log('赋值操作会触发我，这是新赋值：' + newValue)
                currentValue = newValue
                // set的时候也递归一下，这样才能实现对复杂数据的观察
                observe(currentValue) 
              }
            })
          })
        }
        observe(data)
        setTimeout(() => {
           data.info.hobby.push('badminton')
        }, 500)
      }

image.png

如上代码调用数组中的操作函数，如push等是无法监控到的，只输出了两次getter的原因是因为Array.prototype上挂载的方法并不能触发属性值得setter。这并不属于做赋值操作，只是调用数组中的push方法。而输出了两次getter里面的内容，是因为读取了data里面的info跟data.info.hobby这两层属性。data.info.hobby.push('badminton')这段代码就是读取对象的值再进行push，所以会触发getter.

对于框架来说，不能感知数组变化，这显然不合理。在vue2中同样也是有这个问题。它的解决方法就是将数组的常用方法进行重写。进而覆盖原生数组的方法。重写之后的数组方法需要能够被拦截。

实现逻辑如下：

       const arrExtend = Object.create(Array.prototype)
            const arrMethods = ['push','pop','shift','unshift','splice','sort','reverse']
            arrMethods.forEach(method=>{
            const oldMethod = Array.prototype[method]
            const newMethod = function (...args){
                oldMethod.apply(this,args)
                console.log(`我重写了数组的${method}方法`);
            }
            arrExtend[method] = newMethod
        })

        // 覆盖原生方法
        Array.prototype = Object.assign(Array.prototype,arrExtend)
        let arr = [1,2,3]
        arr.push(4)

image.png

这种做法，我查了一下术语叫做 叫做 monkey patch (猴子补丁)。其实本质上就是重写原生的方法，这样做不是很安全，也不优雅。那么还有更好的实现方式吗？

有的。可以使用ES Next的新特性-----Proxy 。下一章我们再详细讲一下