响应式原理的实现

最新推荐文章于 2024-02-07 09:30:00 发布
最新推荐文章于 2024-02-07 09:30:00 发布
阅读量863 收藏 1
点赞数 1
分类专栏： 前端 Vue javascript 文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45658814/article/details/124167177
版权
前端 同时被 3 个专栏收录
75 篇文章 3 订阅
订阅专栏
javascript
64 篇文章 6 订阅
订阅专栏
Vue
61 篇文章 1 订阅
订阅专栏

什么是响应式

自动响应数据变量的代码机制，我们就称之为是响应式的

通过数据劫持和发布者-订阅者模式来实现。一旦发现属性发生改变就通知订阅者，触发相应的回调，来改变视图。

一、Vue3响应式原理的实现

下面的步骤是一步步推导，逐步实现出来的过程。

第一步：响应式函数的封装

// 响应式函数的封装
const reactiveFns = []
function watchFn(fn) {
  reactiveFns.push(fn)
}

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

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  console.log('obj.name的值：' + obj.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + obj.name)
})

obj.name = 'xxx'
reactiveFns.forEach(item => {
  item()
})

第二步：依赖收集类的封装

第一步用数组不方便管理，所以用一个class类来管理。

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(fn) {
    this.reactiveFns.push(fn)
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

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

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  console.log('obj.name的值：' + obj.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + obj.name)
})

obj.name = 'xxx'
depend.notify()

第三步：自动监听对象变化

使用Proxy和Reflect监听对象中的变化。

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(fn) {
    this.reactiveFns.push(fn)
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

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

const objProxy = new Proxy(obj, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    depend.notify()
  }
})

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  console.log('obj.name的值：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

第四步：依赖收集的管理

这就需要用到Map和WeakMap的使用。
第三步问题就是执行 objProxy.age = 20 时，全部响应式函数都执行一遍，没区分name和age对应的响应式函数。

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(fn) {
    this.reactiveFns.push(fn)
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

// 获取depend函数的封装
const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }

  return depend
}

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

const objProxy = new Proxy(obj, {
  get(target, key, receiver) {
    return Reflect.get(target, key, receiver)
  },
  set(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    const depend = getDepend(target, key)
    depend.notify()
  }
})

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  console.log('obj.name的值：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

第五步：正确的收集依赖

class Depend {
  constructor() {
    this.reactiveFns = []
  }

  addDepend(fn) {
    this.reactiveFns.push(fn)
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

// 响应式函数的封装
let activeReactiveFn = null //用于给depend.addDepend(activeReactiveFn)传递参数
function watchFn(fn) {
  activeReactiveFn = fn
  fn()
  activeReactiveFn = null
}

// 获取depend函数的封装
const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }

  return depend
}

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

const objProxy = new Proxy(obj, {
  get(target, key, receiver) {
    const depend = getDepend(target, key)
    depend.addDepend(activeReactiveFn)
    return Reflect.get(target, key, receiver)
  },
  set(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    const depend = getDepend(target, key)
    depend.notify()
  }
})

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  console.log('obj.name的值：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

第六步：对Depend类重构

这一步的修改有两点：

depend.addDepend(activeReactiveFn)改为depend.depend()，定义一个全局变量activeReactiveFn解决传递函数问题；

普通数组 [ ] 改为new Set(),去除重复。

let activeReactiveFn = null

class Depend {
  constructor() {
    //
    this.reactiveFns = new Set()
  }

  // addDepend(fn) {
  //   this.reactiveFns.push(fn)
  // }

  depend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn)
    }
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

// 获取depend函数的封装
const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }

  return depend
}

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

const objProxy = new Proxy(obj, {
  get(target, key, receiver) {
    const depend = getDepend(target, key)
    // depend.addDepend(activeReactiveFn)
    depend.depend()
    return Reflect.get(target, key, receiver)
  },
  set(target, key, newValue, receiver) {
    Reflect.set(target, key, newValue, receiver)
    const depend = getDepend(target, key)
    depend.notify()
  }
})

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  // 这里两次使用objProxy.name，就会在数组中添加重复的响应式函数，所以上面用new Set()
  console.log('obj.name的值：' + objProxy.name)
  console.log('obj.name的值111：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

第七步（最后一步）：对象的响应式操作vue3

let activeReactiveFn = null

class Depend {
  constructor() {
    //
    this.reactiveFns = new Set()
  }

  // addDepend(fn) {
  //   this.reactiveFns.push(fn)
  // }

  depend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn)
    }
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

// 获取depend函数的封装
const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }

  return depend
}

// 第一种方式
// const obj = {
//   name: 'fuyou',
//   age: 18
// }
// const objProxy = reactive(obj)

// 第二种方式：简写
const objProxy = reactive({
  name: 'fuyou',
  age: 18
})

function reactive(obj) {
  return new Proxy(obj, {
    get(target, key, receiver) {
      const depend = getDepend(target, key)
      // depend.addDepend(activeReactiveFn)
      depend.depend()
      return Reflect.get(target, key, receiver)
    },
    set(target, key, newValue, receiver) {
      Reflect.set(target, key, newValue, receiver)
      const depend = getDepend(target, key)
      depend.notify()
    }
  })
}

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  // 这里两次使用objProxy.name，就会在数组中添加重复的响应式函数，所以上面用new Set()
  console.log('obj.name的值：' + objProxy.name)
  console.log('obj.name的值111：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

// ---------------------------------------------------
const infoProxy = reactive({
  address: 'gd'
})

watchFn(function () {
  console.log('-----info.address的值：' + infoProxy.address)
})

infoProxy.address = 'bj'

二、Vue2响应式原理的实现

vue2和vue3实现的逻辑是差不多的，vue2是用Object.defineProperty(),vue3使用Proxy和Reflect。

let activeReactiveFn = null

class Depend {
  constructor() {
    //
    this.reactiveFns = new Set()
  }

  // addDepend(fn) {
  //   this.reactiveFns.push(fn)
  // }

  depend() {
    if (activeReactiveFn) {
      this.reactiveFns.add(activeReactiveFn)
    }
  }

  notify() {
    this.reactiveFns.forEach(item => {
      item()
    })
  }
}

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

// 获取depend函数的封装
const targetMap = new WeakMap()
function getDepend(target, key) {
  let map = targetMap.get(target)
  if (!map) {
    map = new Map()
    targetMap.set(target, map)
  }

  let depend = map.get(key)
  if (!depend) {
    depend = new Depend()
    map.set(key, depend)
  }

  return depend
}

// 第一种方式
// const obj = {
//   name: 'fuyou',
//   age: 18
// }
// const objProxy = reactive(obj)

// 第二种方式：简写
const objProxy = reactive({
  name: 'fuyou',
  age: 18
})

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
}

// watchFn()封装，区分开和普通函数的区别
watchFn(function () {
  // 这里两次使用objProxy.name，就会在数组中添加重复的响应式函数，所以上面用new Set()
  console.log('obj.name的值：' + objProxy.name)
  console.log('obj.name的值111：' + objProxy.name)
})
watchFn(function () {
  console.log('obj.name2的值：' + objProxy.name)
})

watchFn(function () {
  console.log('obj.age的值：' + objProxy.age)
})

objProxy.name = 'xxx'
objProxy.age = 20

// ---------------------------------------------------
const infoProxy = reactive({
  address: 'gd'
})

watchFn(function () {
  console.log('-----info.address的值：' + infoProxy.address)
})

infoProxy.address = 'bj'
浮游本尊
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
最简单的代码实现Vue响应式原理
weixin_40643543的博客
05-07 622
Vue 内部使用了 Object.defineProperty() 来实现数据响应式，通过这个函数可以监听到 set 和 get 的事件。 var data = { name: 'yck' } observe(data) let name = data.name // -> get value data.name = 'yyy' // -> change value function...
响应式布局的实现方式（5种）
热门推荐
m0_66051368的博客
04-12 3万+
响应式布局是同一页面在不同的屏幕上有不同的布局，即只需要一套代码使页面适应不同的屏幕。 1、百分比布局 百分比是相对于 包含块 的计量单位，通过对属性设置百分比来适应不同的屏幕 包含块： 1. 有父元素相对于父元素 2. 无父元素相对于视口 3. 或者继承于父元素 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta...
响应式布局方法总结
weixin_45189747的博客
11-10 1827
定义 响应式布局指的是同一页面在不同屏幕尺寸下有不同的布局。传统的开发方式是PC端开发一套，手机端再开发一套，而使用响应式布局只要开发一套就够。 优点 面对不同分辨率设备灵活性强 能够快捷解决多设备显示适应问题 缺点 仅适用布局、信息、框架并不复杂的部门类型网站 兼容各种设备工作量大，效率低下 代码累赘，会出现隐藏无用的元素，加载时间加长 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到...
【JavaScript】vue中的响应式原理
m0_68324632的博客
01-18 1073
在搞懂Vue2 - Vue3 响应式原理前，我们首先要认识JavaScript中的Object.defineProperty、Proxy、map、weakMap、Set、Reflect这几个知识点。如果已经明白这些知识点，我们可以直接导航跳到"响应式原理"。
响应式原理
红叶落水的博客
02-20 2032
红叶何时落水 响应式指的是当我们修改一个变量时，会有某些操作可以自动进行。 比较典型的便是Vue框架中的实例数据一旦发生变化，便会自动更新到视图层。 <div id="red">{{name}}</div> <script> var app = new Vue({ el: '#red', data: { name: '红叶', age: 19, } })
vue.js响应式原理解析与实现
10-18
主要为大家详细介绍了vue.js响应式原理解析与实现，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue响应式原理.pdf
04-19
响应式原理：在读取属性的时候收集依赖，在改变属性值的时候触发依赖的更新 实现一个observer，劫持对象属性的getter和setter 实现一个全局的订阅器Dep，可以追加订阅者，和通知依赖更新 在读取属性的时候追加当前...
浅谈Vue的响应式原理
10-16
让我们来回顾下Vue的介绍,可以发现Vue 最显著的一个功能是响应系统。那么它的实现原理有又是如何呢?下面小编和大家来一起学习一下
Vue响应式原理详解
11-29
Vue 嘴显著的特性之一便是响应式系统（reactivity system），模型层（model）只是普通JavaScript对象，修改它则更新视图（view）。 Vue 响应式系统的底层细节 如何追踪变化 把一个普通的JavaScript对象传给Vue实例的...
深入Vue实现原理，实现一个响应式框架
02-24
在前面的章节中我们已经学习了Vue.js的基础内容并且了解了Vue.js的源码实现，包括：Vue的生命周期、Vue的数据响应、Vue的渲染流程等等，在这一章节我们会和大家一起去实现一个响应式的框架--MVue，MVue会遵循Vue的...
【Vue3中的响应式原理】
小田是个程序员的博客欢迎你的到来呀~
04-20 1万+
在Vue2中，数据响应式主要借助Object.defineProperty()来实现，存在的缺陷是无法操作数据的增加和删除，在Vue3中，数据响应式主要借助proxy和Reffect配合实现，可以做到实现数据的增删改查。
vue响应式原理
weixin_48181168的博客
09-07 3万+
vue响应式原理 vue响应式也叫作数据双向绑定，大致原理阐述： ​ 首先我们需要通过Object.defineProperty()方法把数据(data)设置为getter和setter的访问形式，这样我们就可以在数据被修改时在setter方法设置监视修改页面信息，也就是说每当数据被修改，就会触发对应的set方法，然后我们可以在set方法中去调用操作dom的方法。 ​ 此外，如果页面有input用v-model绑定数据，我们需要在这种绑定了data的input元素上添加监听，添加input事件监听，每.
什么是响应式设计？响应式设计的基本原理是什么？如何做？
2301_76869008的博客
05-28 2026
响应式布局优点可以看到：* 面对不同分辨率设备灵活性强* 能够快捷解决多设备显示适应问题缺点：* 仅适用布局、信息、框架并不复杂的部门类型网站* 兼容各种设备工作量大，效率低下* 代码累赘，会出现隐藏无用的元素，加载时间加长* 其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果* 一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
vue的响应式原理
垂耳兔的博客
04-28 8557
一、reduce 1.数值的累加 作用：将****前一项*和*后一项****的值进行运算，返回累积的结果 格式：数组.reduce（function（prev，next）{…}） 其中，prev表示前一项，next表示后一项。 运算规则： 默认情况下，会把数组的第一个元素作为prev的初始值。 每循环一次，把累积的结果赋给prev，next就变为下一个数组元素 var arr3 = [10,22,23,25,50]; const total = arr3.reduce(function(pre,ne
响应式设计的基本原理和实现方法（超级详细）
最新发布
贫僧法号依平
02-07 1047
面对不同分辨率设备灵活性强能够快捷解决多设备显示适应问题仅适用布局、信息、框架并不复杂的部门类型网站兼容各种设备工作量大，效率低下代码累赘，会出现隐藏无用的元素，加载时间加长其实这是一种折中性质的设计解决方案，多方面因素影响而达不到最佳效果一定程度上改变了网站原有的布局结构，会出现用户混淆的情况。
Vue响应式原理
m0_73442777的博客
04-18 590
Vue.js的响应式原理是Vue.js框架的核心之一。当你更新数据时，Vue.js能够自动地更新视图。这一过程实现了数据与视图之间的自动同步，使得应用程序的开发更加高效。
CSS3有关响应式的原理学习过程
BWater_monster的博客
03-31 586
css3响应式的原理学习过程
在vue3中 利用计算属性和响应式原理 实现获取计算机当前时间 并实时刷新
04-01
在Vue 3中，可以通过计算属性和响应式原理来实现获取计算机当前时间并实时刷新。具体实现方法如下： 1. 在data中定义一个currentTime属性，初始值为null。 ``` data() { return { currentTime: null } } ``` 2. 创建一个计算属性，用来获取当前时间。 ``` computed: { getCurrentTime() { return new Date().toLocaleTimeString() } } ``` 3. 在mounted生命周期钩子中，使用setInterval函数每秒钟更新一次currentTime属性的值。 ``` mounted() { setInterval(() => { this.currentTime = this.getCurrentTime }, 1000) } ``` 4. 在模板中使用{{currentTime}}来显示当前时间。 完整代码如下： ``` <template> <div> <p>{{currentTime}}</p> </div> </template> <script> export default { data() { return { currentTime: null } }, computed: { getCurrentTime() { return new Date().toLocaleTimeString() } }, mounted() { setInterval(() => { this.currentTime = this.getCurrentTime }, 1000) } } </script> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值