深入Vue的响应式原理 ​

var vm = new Vue({
  data:{
    a:1
  }
})
Vue.set(vm,'b',2) //这么做是错误地  因为'b' 被视作了根级别地数据

var vm = new Vue({
  data:{
    msg:{
      a:1
    }
  }
})
vm.msg.b=2 //不具有响应性
Vue.set(vm.msg,'b',2) //这样做是符合Vue规范地

var vm = new Vue({
        el: '#app',
        data() {
          return {
            list: [1, 2, 3, 4, 5],
          }
        },
      })
 vm.list[0] = 10 //直接通过索引值修改某一项无法实现响应性
 vm.list.splice(0, 1, 10) //利用数组方法可以实现响应性
 vm.list.length = 2

import newArrayPrototype from './3.array.js' //引入重写数组的方法
//定义一个起始数据data data有可能是一个函数 也可能是一个对象 所以需要做一个判断  
data = typeof data === 'function' ? data() : data
//然后定义一个方法 用于观测数据 
observe(data)
function observe(data){
    // 数据是基本数据类型 直接终止
    if (typeof data !== 'object' || typeof data === null) return
    //如果数据是引用值类型 我们就需要分为对象和数组2大类 来单独处理
    if (Array.isArray(data)) {
      observeArray(data) //进一步观测数组中的每一项
      //这里重写部分数组方法 实现数组操作的响应性 这里的思路是在数组的原型链上多加一层 因为除开重写的方法 还有其他数组方法不能被丢失 
     data.observeArray=observeArray //给自身挂载一个观测数组的方法 在下面会用到
     data.__proto__= newArrayPrototype  //这个newArrayPrototype 可以放到单独文件中编写实现 然后引入 
    } else {
      walk(data) //对象的处理方法
    }
}
//先处理对象 实现walk方法
function walk(data){
    //对象数据 需要对data中的每一个数据都实现响应式  所以需要遍历
     Object.keys(data).forEach((key) => {
      defineReactive(data, key, data[key]) //这里的defineReactive即是实现响应式原理的核心方法
    })
}
function defineReactive(data, key, value) {
  observe(value) //对象内部可能存在多层嵌套 所以要递归观测
  Object.defineProperty(data, key,{ //这里就调用核心API来实现数据劫持
    get() {
      return value
    },
    set(newValue) {
      if (newValue === value) return
      observe(newValue) //修改后的数据也要观测 变成响应式的
      value = newValue
      console.log('视图更新成功') //这里不关注是如何通知视图的 用一句输出语句代替
    },
  })
}
//再来处理数组
function observeArray(data){ //数组中的具体每一项仍旧需要观测 
    data.forEach((item) => {
      observe(item)
    })
}

const oldArrayPrototype = Array.prototype //数组本身的方法需要拷贝一份 因为有些方法没有重写 需要保留下来
const newArrayPrototype = Object.create(oldArrayPrototype) //在data和Array中间加了一层原型链
let arrayLists = [ //这是7个改变数组的方法 需要重写 其他数组方法不用重写
  'push',
  'pop',
  'shift',
  'unshift',
  'reverse',
  'sort',
  'splice',
]
arrayLists.forEach((item) => {
  newArrayPrototype[item] = function (...arg) {
    const result = oldArrayPrototype[item].call(this, ...arg) //实现数组方法本身的功能
    let inserted  //有3个方法 push unshift splice 会加入新数组 这些数组也需要被观测
    switch (item) {
        case 'push':
        case 'unshift':
            inserted = arg
            break
        case 'splice':
            inserted = arg.slice(2)
        default:
            break
    }
    if(inserted){
        this.observeArray(inserted) //这里的this 指向data 
    }
    console.log('视图更新成功') //通知视图更新
    return result
  }
})
export default newArrayPrototype

function reactive(data) { //定义自己的reactive
        const proxy = new Proxy(data, { //利用ES6新增的Proxy类 来创造一个代理对象
          get(_data, propName) { //对代理对象任何属性的访问都会走 get
            console.log(`你访问了${propName}属性`)
            return _data[propName]
          },
          set(_data, propName, newValue) { //对代理对象任何属性的修改和增加都会走 set
            if (newValue !== _data[propName]) {
              _data[propName] = newValue
              console.log('视图更新成功')
            }
          },
          deleteProperty(_data, propName) { //对代理对象任何属性的删除都会走deleteProperty
            delete _data[propName]
            console.log('视图更新成功')
          },
        })
        return proxy
}

let data = {
        name: '张三',
        age: 18,
        tall: 20,
}
let proxyData = reactive(data)

// 创建一个深度代理函数
      function deepProxy(object, handler) {
        if (isComplexObject(object)) {
          addProxy(object, handler)
        }
        return new Proxy(object, handler)
      }
      // 新增代理函数实现
      function addProxy(obj, handler) {
        for (let i in obj) {
          if (typeof obj[i] === 'object') {
            if (isComplexObject(obj[i])) {
              addProxy(obj[i], handler)
            }
            obj[i] = new Proxy(obj[i], handler)
          }
        }
      }
      // 判断是不是是一个对象
      function isComplexObject(object) {
        if (typeof object !== 'object') {
          return false
        } else {
          for (let prop in object) {
            if (typeof object[prop] == 'object') {
              return true
            }
          }
        }
        return false
      }

      function reactive(data) {
        const proxy = deepProxy(data, {
          get(_data, propName) {
            console.log(`你访问了${propName}属性`)
            return _data[propName]
          },
          set(_data, propName, newValue) {
            if (newValue !== _data[propName]) {
              _data[propName] = newValue
              console.log('视图更新成功')
            }
          },
          deleteProperty(_data, propName) {
            delete _data[propName]
            console.log('视图更新成功')
          },
        })
        return proxy
      }