vue3与vue2的区别之数据响应

/**
 * Observer类会通过递归的方式把一个对象的所有属性都转化成可观测对象
 */
export class Observer {
  constructor (value) {
    this.value = value
    // 给value新增一个__ob__属性，值为该value的Observer实例
    // 相当于为value打上标记，表示它已经被转化成响应式了，避免重复操作
    def(value,'__ob__',this)
    if (Array.isArray(value)) {
      // 当value为数组时的逻辑
      // ...
    } else {
      this.walk(value)
    }
  }

  walk (obj: Object) {
    const keys = Object.keys(obj)
    for (let i = 0; i < keys.length; i++) {
      defineReactive(obj, keys[i])
    }
  }
}
/**
 * 使一个对象转化成可观测对象
 * @param { Object } obj 对象
 * @param { String } key 对象的key
 * @param { Any } val 对象的某个key的值
 */
function defineReactive (obj,key,val) {
  // 如果只传了obj和key，那么val = obj[key]
  if (arguments.length === 2) {
    val = obj[key]
  }
  if(typeof val === 'object'){
      new Observer(val)
  }
  Object.defineProperty(obj, key, {
    enumerable: true,
    configurable: true,
    get(){
      console.log(`${key}属性被读取了`);
      return val;
    },
    set(newVal){
      if(val === newVal){
          return
      }
      console.log(`${key}属性被修改了`);
      val = newVal;
    }
  })
}

const obj = reactive({
  name: 'chenjing',
  age: 18
})

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      console.log('target, key', target, key, target[key])
      return target[key]
    })
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      const res = Reflect.get(target, key) // 可以直接return target[key]，避免报错和代码的优雅性，模仿源码采用Reflect
      console.log('get', key)
      return (typeof res === 'object') ? reactive(res) : res // 子属性若是对象 需要再次代理
    },
    set(target, key, val) {
      const res = Reflect.set(target, key, val)
      console.log('set', key)
      return res
    },
    deleteProperty() {
      const res = Reflect.deleteProperty(target, key)
      console.log('deleteProperty', key)
      return res
    }
  })
}

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key) {
      const res = Reflect.get(target, key)
      console.log('get', key)
      // 依赖收集
      track(target, key)
      return (typeof res === 'object') ? reactive(res) : res
    },
    set(target, key, val) {
      const res = Reflect.set(target, key, val)
      console.log('set', key)
      // 触发
      trigger(target, key)
      return res
    },
    deleteProperty() {
      const res = Reflect.deleteProperty(target, key)
      console.log('deleteProperty', key)
      return res
    }
  })
}

// 保存副作用函数
const effectStack = []
// 添加副作用函数
function effect (fn) {
  const e = createReactiveEffect(fn)

  // 立即执行
  e()
  return e
}

function createReactiveEffect(fn) {
  // 封装fn，处理其错误，执行之，存放到stack
  const effect = () => {
    try {
      // 0入栈
      effectStack.push(effect)
      // 1 执行fn
      return fn()
    } finally {
      // 2 出栈
      effectStack.pop
    }
  }
  return effect
}

// 保存映射关系的数据结构
const targetMap = new WeakMap()

// 当副作用函数触发响应式数据之后，执行track，进项依赖收集工作
// 目标是将target， key和前面effectStack中的副作用函数之间建立映射关系
function track (target, key) {
  // 1.先拿出响应函数
  const effect = effectStack[effectStack.length - 1]
  if (effect) {
    // 获取target对应的map
    let depMap = targetMap.get(target)
    if (!depMap) {
      // 初始化的时候 depMap不存在 初始化一次
      depMap = new Map()
      targetMap.set(target, depMap)
    }

    // 从depMap中 获取对应的set
    let deps = depMap.get(key)
    if (!deps) {
      // 初始化需要创建一个Set
      deps = new Set()
      depMap.set(key, deps)
    }

    // 将副作用函数放到集合中
    deps.add(effect)
  }
}

// 触发响应式函数
function trigger (target, key) {
  // 从targetMap中获取对应副作用函数集合
  // 1. 获取target对应的map
  const depMap = targetMap.get(target)
  if (!depMap) return

  // 根据key获取对应的deps
  const deps = depMap.get(key)
  if (deps) {
    // 遍历执行他们
    deps.forEach(dep => dep())
  }
}
const obj = reactive({
  name: 'chenjing',
  age: 18,
  look: {
    height: '180cm'
  }
})
effect(() => {
  console.log('effect1', obj.name)
})
effect(() => {
  console.log('effect2', obj.name, obj.look.height)
})

setTimeout(() => {
  console.log('----  分割线   -----')
  obj.name = 'jay'
  obj.look.height = '178cm'
}, 1000)