结合vue响应式原理实现超简单响应式

最新推荐文章于 2024-06-01 16:31:18 发布

OnTheRoad_ING

最新推荐文章于 2024-06-01 16:31:18 发布

阅读量171

点赞数

分类专栏： vue 文章标签： vue.js javascript ecmascript 前端前端框架

本文链接：https://blog.csdn.net/OnTheRoad_ING/article/details/131253184

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

实现超简单响应式数据

在这里插入图片描述

利用Object.defineProperty

// vue2 使用Object.defineProperty api

// 实现vue数据拦截
// 创建全局代理 保存 对象
const objReactionProxy = new WeakMap()

// 创建全局变量 - 收集被监听的函数
let activeFn = null

// 创建收集依赖类
class Depend {
  constructor() {
    this.reactiveFns = new Set()
  }

  // 收集依赖
  addDepend() {
    if (activeFn) {
      this.reactiveFns.add(activeFn)
    }
  }

  // 通知 => 收集到的依赖执行
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

function watchFn(fn) {
  activeFn = fn
  fn()
  activeFn = null
}

function getDepend(target, key) {
  let keydepend = objReactionProxy.get(target)
  if (!keydepend) {
    keydepend = new Map()
    objReactionProxy.set(target, keydepend)
  }
  let depend = keydepend.get(key)
  if (!depend) {
    depend = new Depend()
    keydepend.set(key, depend)
  }
  return depend
}

function toProxy(target) {
  Object.keys(target).forEach(key => {
    let value = target[key]
    Object.defineProperty(target, key, {
      get() {
        const depend = getDepend(target, key)
        depend.addDepend()
        return value
      },
      set(newV) {
        value = newV
        const depend = getDepend(target, key)
        depend.notify()
      },
    })
  })
  return target
}

const obj = {
  name: 'qqq',
  age: 18,
}

// console.log(obj.name, obj.age)
// console.log('=================')
// console.log()
const proxyObj = toProxy(obj)

watchFn(() => {
  console.log('obj.name=====', proxyObj.name)
})
console.log('-----------------------')
proxyObj.name = 'ewq'
proxyObj.name = 'qwe'
proxyObj.name = 'asd'

利用Proxy

// vue3使用Proxy api 实现

// 实现vue数据拦截
// 创建全局代理 保存 对象
const objReactionProxy = new WeakMap()

// 创建全局变量 - 收集被监听的函数
let activeFn = null

// 创建收集依赖类
class Depend {
  constructor() {
    this.reactiveFns = new Set()
  }

  // 收集依赖
  addDepend() {
    if (activeFn) {
      this.reactiveFns.add(activeFn)
    }
  }

  // 通知 => 收集到的依赖执行
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

function watchFn(fn) {
  activeFn = fn
  fn()
  activeFn = null
}

function getDepend(target, key) {
  let keydepend = objReactionProxy.get(target)
  if (!keydepend) {
    keydepend = new Map()
    objReactionProxy.set(target, keydepend)
  }
  let depend = keydepend.get(key)
  if (!depend) {
    depend = new Depend()
    keydepend.set(key, depend)
  }
  return depend
}

function toProxy(target, options) {
  return new Proxy(
    target,
    options ?? {
      set(target, key, value, receiver) {
        const depend = getDepend(target, key)
        depend.notify()
        return Reflect.set(target, key, value, receiver)
      },
      get(target, key, value, receiver) {
        const depend = getDepend(target, key)
        depend.addDepend()
        return Reflect.get(target, key, value, receiver)
      },
    }
  )
}

const obj = {
  name: 'qqq',
  age: 18,
}

// console.log(obj.name, obj.age)
// console.log('=================')
// console.log()
const proxyObj = toProxy(obj)

watchFn(() => {
  console.log('obj.name=====', proxyObj.name)
})
console.log('-----------------------')
proxyObj.name = 'ewq'
proxyObj.name = 'qwe'
proxyObj.name = 'asd'