2024-04-19 深入JavaScript高级语法七——响应式原理实现

最新推荐文章于 2024-06-13 14:23:28 发布
最新推荐文章于 2024-06-13 14:23:28 发布
阅读量264 收藏 7
点赞数 5
分类专栏： js学习 文章标签： javascript 前端 vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41068717/article/details/137955645
版权

目录

1、一个简单的响应式函数的封装

// 只针对name的变化做了封装
let reactiveFns = []
// 封装一个响应式的函数
function watchFn(fn) {
  reactiveFns.push(fn)
}

// 对象的响应式
const obj = {
  name: "张三",
  age: 12
}

watchFn(function() {
  const newName = obj.name
  console.log('hello world')
  console.log(obj.name)
})

watchFn(function() {
  console.log(obj.name, "-----")
})

function bar() {
  console.log("普通的其他函数，这个函数不需要有任何响应")
}

// 对象的某个属性发生了变化，使用了该对象的方法自动重新执行
obj.name = "李四"
reactiveFns.forEach(fn => {
  fn()
})
// console.log打印值
// "hello world"
// "李四"
// "李四 -----"

2、依赖收集类的封装

实际开发中，需要响应的对象是有很多的，每个对象也有很多属性，不可能每个对象及每个对象的属性都通过一个数组分别收集，所以引出了类的封装。

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
const depend = new Depend()
function watchFn(fn) {
  depend.addDepend(fn)
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

watchFn(function() {
  const newName = obj.name
  console.log('hello world')
  console.log(obj.name)
})

watchFn(function() {
  console.log(obj.name, "-----")
})

obj.name = "李四"
// 手动监听变化
depend.notify()

3、自动监听对象变化(暂未区分具体的属性变化)

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
const depend = new Depend()
function watchFn(fn) {
  depend.addDepend(fn)
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  const newName = objProxy.name
  console.log('hello world')
  console.log(objProxy.name)
})

watchFn(function() {
  console.log(objProxy.name, "-----")
})

objProxy.name = "李四"
objProxy.name = "王二"
// 就算是age发生变化，依赖name的方法也会重新执行
objProxy.age= 17

4、依赖收集的管理

原因：真实开发中，是有多个对象的，而且每个对象也会对应不同的属性。

注释：每个对象单独对应一个Map（是为了防止有不同对象存在相同属性的情况），再把不同对象的Map通过一个统一的WeakMap管理起来。
对象的依赖管理
伪代码：

const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}
const info= {
  name: "张三", // dep对象
  address: "四川省成都市",  // dep对象
}
const objMap = new Map()
objMap.set('name', 'nameDepend')
objMap.set('age', 'ageDepend')

const infoMap = new Map()
infoMap.set('address', 'addressDepend')
objMap.set('name', 'nameDepend')

const targetMap = new WeakMap()
targetMap.set(obj, objMap)
targetMap.set(info, infoMap)

// 获取obj.name的depend
const depend = targetMap.get(obj).get('name')
depend.notify()

封装一个获取depend的函数

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}
...
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 使用getDepend方法
    const depend = getDepend(target, key)
    depend.notify()
  }
})

5、正确的收集依赖

重点关注watchFn方法的变化和activeReactiveFn全局变量的作用，以及Proxy中的get方法

class Depend {
  constructor() {
    this.reactiveFns = []
  }
  addDepend(reactiveFn) {
    this.reactiveFns.push(reactiveFn)
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
// activeReactiveFn：一个全局中间变量，使得能够在Proxy的get方法中拿到需要响应的函数
let activeReactiveFn = null
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
  	// 收集对应的响应式函数
    // 1、根据target,key获取对应的depend
    const depend = getDepend(target, key)
    // 2、给depend对象中添加响应函数
    depend.addDepend(activeReactiveFn)
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    const depend = getDepend(target, key)
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log("--第一个name函数开始--")
  const newName = objProxy.name
  console.log('hello world')
  console.log(objProxy.name)
  console.log("--第一个name函数结束--")
})

watchFn(function() {
  console.log("--第一个age函数开始--")
  console.log(objProxy.age)
  console.log("--第一个age函数结束--")
})

watchFn(function() {
  console.log(objProxy.name, "新函数")
  console.log(objProxy.age, "新函数")
})

console.log("----------------改变obj的name值----------------")
// objProxy.name = '王五'
objProxy.age = 20

6、对Depend类进行重构优化

Depend优化：

  1. depend方法
  2. 使用Set来报错依赖函数，而不是数组[]
// activeReactiveFn：一个中间变量，使得能够在Proxy的get方法中拿到需要响应的函数
let activeReactiveFn = null

class Depend {
  constructor() {
    // 优化2：通过Set结构收集需要响应的方法，防止同一个响应式函数被重复收集
    this.reactiveFns = new Set()
  }
  addDepend(reactiveFn) {
    this.reactiveFns.add(reactiveFn)
  }
  // 优化1：增加depend方法，使得在Proxy.get方法里面添加响应式函数时，不需要关心activeReactiveFn参数
  depend() {
    if (activeReactiveFn) {
      this.addDepend(activeReactiveFn)
    }
  }
  notify() {
    this.reactiveFns.forEach(fn => {
      fn()
    })
  }
}

// 封装一个响应式的函数
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

// 封装一个获取depend的函数
const targetMap = new WeakMap()
function getDepend(target, key) {
  // 根据target对象获取map的过程
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }
  
  // 根据key获取depend对象
  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }
  return depend
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = new Proxy(obj, {
  get: function(target,key,receiver) {
    // 根据target,key获取对应的depend
    const depend = getDepend(target, key)
    // 给depend对象中添加响应函数
    // depend.addDepend(activeReactiveFn)
    // 直接调用depend方法，不需要传递activeReactiveFn参数
    depend.depend()
    return Reflect.get(target,key,receiver)
    
  },
  set: function(target,key,newValue,receiver) {
    Reflect.set(target,key,newValue,receiver)
    // 自动监听
    const depend = getDepend(target, key)
    depend.notify()
  }
})


// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(objProxy.name,"------")
  console.log(objProxy.name,"++++++")
})

objProxy.name = "李四"

7、对象的响应式操作

7.1、vue3实现方式——Proxy

重点关注reactive方法的封装和使用

...
// 把传入的对象变成响应式对象
function reactive(obj) {
  return new Proxy(obj, {
    get: function(target,key,receiver) {
      // 根据target,key获取对应的depend
      const depend = getDepend(target, key)
      // 给depend对象中添加响应函数
      // depend.addDepend(activeReactiveFn)
      // 直接调用depend方法，不需要传递activeReactiveFn参数
      depend.depend()
      return Reflect.get(target,key,receiver)

    },
    set: function(target,key,newValue,receiver) {
      Reflect.set(target,key,newValue,receiver)
      // 自动监听
      const depend = getDepend(target, key)
      depend.notify()
    }
  })
}

// 对象的响应式
const obj = {
  name: "张三", // dep对象
  age: 12,  // dep对象
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const objProxy = reactive(obj)

// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(objProxy.name,"------")
  console.log(objProxy.name,"++++++")
})

objProxy.name = "李四"

const info = {
  address: "四川省成都市"
}

// 监听对象的属性变化：Proxy(vue3)/Object.defineProperty(vue2)
const infoProxy = reactive(info)

// 注意：原对象通过Proxy代理后，要想监听到对象变化，就不能使用原对象了，而要使用代理对象objProxy
watchFn(function() {
  console.log(infoProxy.address,"------")
})

infoProxy.address = "广州市"

const foo = reactive({
  name: "foo"
})

watchFn(() => {
  console.log(foo.name)
})
foo.name = "bar"

7.2、vue2实现方式——Object.defineProperty

function reactive(obj) {
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    Object.defineProperty(obj, key, {
      get: function() {
        const depend = getDepend(obj, key)
        depend.depend()
        return value
      },
      set: function(newValue) {
        value = newValue
        const depend = getDepend(obj, key)
        depend.notify()
      }
    })
  })
  return obj
}
长乐呀
关注
  • 5
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
基于HTML+CSS+JavaScript制作响应式个人博客模板源码( JavaScript期末大作业 )
HTML网页设计
08-07 860
🏀校园篮球网页设计、⚽足球体育运动、🤽体育游泳运动、🏓兵乓球 、🎾网球、等网站的设计与制作。🏷️ 大学生校园运动静态HTML网页设计作品，采用DIV CSS布局制作，内容包括：校园运动、运动技巧、运动规则、技术规则、经典动作。页面主体内容区域宽度为1200PX。网页整体使用CSS设置了网页背景图片。页面精美包含多个排版布局，学生网页作业水平制作。🏅 一套优质的💯网页设计应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构......
基于Web的个人网页响应式页面设计与实现 HTML+CSS+JavaScript（web前端网页制作课作业）
HTML网页设计
08-01 1144
🧑个人网页设计、🙋‍♂️个人简历制作、👨‍💼简单静态HTML个人网页作品、👨‍🏭个人介绍网站模板 、等网站的设计与制作。⭐个人网页设计网站模板采用DIV CSS布局制作，网页作品有多个页面，如 :个人介绍（文字页面）、我的作品（图片列表）、个人技能（图文页面）、在线留言（表单页面）CSS样式方面网页整体采用左右布局结构，制作了网页背景图片，导航区域每个导航背景色不同，导航背景色与页面背景呼应。🏅 一套A+的网页应该包含 (具体可根据个人要求而定)📔网站布局方面：计划采用目前主流的、能兼容各大...
全栈开发之路——前端篇（3）setup和响应式数据
m0_74475812的博客
05-02 1130
框架确定、ide设置与项目创建：介绍项目文件意义、组件结构与导入以及setup的引入。本文为该系列的第三篇，主要讲述Vue核心的setup语法，同时讲解再使用了setup后如何设置响应式数据。
vue3学习笔记(总)——ts+组合式API(setup语法糖)
小多的博客
01-18 6896
接受一个内部值，返回一个响应式的、可更改的 ref 对象，此对象只有一个指向其内部值的属性 。 也可以获取属性 的浅层作用形式。 1.4 triggerRef() 强制触发依赖于一个浅层 ref 的副作用，这通常在对浅引用的内部值进行深度变更后使用。强制更新注意： ref()和shallowRef()不能一块写，不然会影响shallowRef 造成视图更新 由于 ref底层调用了triggerRef()，所以会造成视图的强制更新 1.5 customRef() 创建一个自定义的 ref，显式声明对
vue的介绍-基本语法
qq_62898618的博客
09-18 3897
vue是一个构建用户界面UI的渐进式javascript框架，渐进式的框架是指可以一步一步的由浅入深的去使用这个框架，该框架可以逐步引入项目。作者：尤雨溪。
Vue.js-深入响应式原理
01-27
现在是时候深入一下了！Vue最独特的特性之一，是其非侵入性的响应式系统。数据模型仅仅是普通的 JavaScript对象。而当你修改它们时，视图会进行更新。这使得状态管理非常简单直接，不过理解其工作原理同样重要，这样...
tree-sitter-[removed]树保姆的Javascript语法
04-28
tree-sitter-javascript JavaScript语法。 参考
第课-JavaScript-语法优秀文档.ppt
11-14
第课-JavaScript-语法优秀文档.ppt
JavaScript-study:JavaScript +基础知识（ES6语法，高级语法）
05-23
学习JavaScript 我学习了Web html和CSS的基础知识，但是我不了解js，因此我记得在一个科学项目中遇到了一些麻烦； 因此，我想通过做我所学的js来制作前端的基础知识。 通过学习这个node.js类，我们将学习js的语法...
Garuda-Javascript-Syntax:语法Garuda Javascript的屏幕截图
04-30
Javascript-语法屏幕截图由Carbon（ ）进行专辑1个Basic.png2鹰航Component.png3 Ajax.png4 Single Data.png5 Multiple Data.png6 Input Focus Value.png7 Button Event.png8预览Image.png9从URL.png加载图像10鼠标...
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 507
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 341
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1227
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 528
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 424
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1230
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
vue2中如何使用函数式组件
JackZhouMine
06-08 1039
vue 在 render 函数的第二个参数中提供了context，用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象，即 h 的第二个参数。listeners: 组件上监听的事件对象，在组件上监听 ` event-name ` ，listeners 对象就有 ` event-name ` 属性，值为函数，数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数，返回了包含所有插槽的对象。
Ethereum-Score-Hella怎么使用，举例说明
ZJQ的博客
06-09 48
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得。
Vue在表单校验中trigger属性指定何时触发校验规则
最新发布
李长渊的博客
06-13 593
Vue在表单校验中trigger属性指定何时触发校验规则
在不使用库的情况下用原生javaScript语法实现HMAC-SHA256
05-26
在JavaScript中，可以使用Crypto API实现HMAC-SHA256。以下是一个示例代码： ```javascript function sha256(message) { // convert message to array buffer const msgBuffer = new TextEncoder().encode...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值