vue的设计原理1

数据响应式原理

对象的数据响应

数据变更能够响应在视图中，就是数据响应式。vue2中利用Object.defineProperty()实现变更检测
先来一个简单的实现：

const obj = {}
function defineReactive(obj,key,val){//val是传参
    // 参数3是描述对象
    Object.defineProperty(obj, key, {
        get() {
          console.log('get', key);
          return val
        },
        set(newVal) {
          if (newVal !== val) {
            console.log('set', key);
            val = newVal  //此处对传参进行赋值
          }
        }
      })
}
defineReactive(obj,'foo','foo')
obj.foo
obj.foo='aaaaaaaaa'

打印出来

这个有一个要注意的地方，在set中将newVal赋值给val（传参），为什么能够成功呢？其实是在get中的return形成了闭包。
多发情况：
1.对象中有多个属性，需要对对象进行遍历添加ge’tter，setter。

function observe(obj) {
    if (typeof obj !== 'object' || obj === null) {
      return
    }
      // 遍历
  Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]))
}

2.对象中嵌套对象

function defineReactive(obj, key, val) {
  // val可能还是对象，此时我们需要递归
  observe(val)
  ......
  }

3.给对象的某个属性赋值为对象

     set(newVal) {   //在set中递归一下
      if (newVal !== val) {
        console.log('set', key);
        // 防止newVal是对象，提前做一次observe
        observe(newVal)
        val = newVal
      }
    }

4.添加删除了新属性无法检测

 // 对于新加入属性，需要单独处理他的响应式
function set(obj, key, val) {
  defineReactive(obj, key, val)
}

数组的数据响应

首先object.defineProperty()对于数组的变化是没有用的。对于数组的更新需要一下几个步骤：
1.找到数组原型，就是在找到相应的数组方法，除了能够进行push等之外还能监控
2.覆盖那些能够修改数组的更新方法，使其可以通知更新 ,变更7个操作
3.将得到的新的原型设置到数组实例原型上

   const orginalProto = Array.prototype;
//将原型中的7个方法进行备份，不可以在原型上修改不然会导致所有的数组都有问题
const arrayProto = Object.create(orginalProto);
//数组的7个方法进行遍历然后，进行覆盖

['push','pop','shift','unshift','splice','sort','reverse'].forEach(mm=>{
//原始操作,借用原来的方法来调用，就不用自己再添加相应的方法
arrayProto[mm]=function(){
  orginalProto[mm].apply(this,arguments)
}
console.log('操作数组的方法')
console.log(arguments) //插入的值
//覆盖操作，通知更新
})

  //判断传入obj类型
  console.log(Array.isArray(obj))
  if(Array.isArray(obj)){
    //覆盖原型替换7个变更操作
    obj._proto_ = arrayProto   //设置实例的原型
    //对数组内部元素执行相应化
    const keys = Object.keys(obj)   //对数组进行处理，返回索引值数组
    for(let i=0;i<obj.length;i++){
      observe(obj[i])
    }
  }