Vue3&Vue2响应式实现

最新推荐文章于 2024-01-26 12:15:00 发布
最新推荐文章于 2024-01-26 12:15:00 发布
阅读量206 收藏
点赞数
分类专栏： JavaScript 文章标签： vue.js 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/rb0518/article/details/126260165
版权

说到Vue的响应式，这恐怕是我们前端人员在面试的时候必问的问题了吧，还记得我刚大三暑假出来面试的时候，面试官A问：说说你对Vue响应式的理解，3和2两者有什么区别，当时我心里就想这你***的什么呀，老子都没听过

当然是了解过的呀，我解释完了之后面试官说了一句还行，只是不太深入

那今天咱们就来认识认识什么是响应式

一、什么是响应式?

看一下代码，当我们修改num的值时，想要对应的执行某一个引用num的函数

就像Vue中，修改了data里的属性时，对应的computed也会发生改变

上面的这样一种可以自动响应数据变量的代码机制，我们就称之为是响应式

let num = 3;

function changeNum() {
    
    console.log('num被响应式的改变了', num);
    
}

num = 10;

二、怎么实现一个简单的响应式?

我们以Vue3的Proxy为例

    const obj = {
      name: '张三',
      age: 19
    }

    // 类具有更好的收集性
    class Depend {
      constructor() {
        //这里使用Set是为了解决在watch函数中多次引用同一个属性会创建多个相同函数的问题，因为Set存储的数据是不重复的
        this.reactives = new Set()
      }

      addDepend(fn) {
        this.reactives.add(fn)
      }

      notify() {
        this.reactives.forEach(fn => fn && fn())
      }
    }

    //定义一个监听对应函数变化的函数, 形参fn接收变化的函数
    const depend = new Depend()
    function watchFn(fn) {
      depend.addDepend(fn)
    }

    //这里不限于使用箭头函数，匿名函数，命名函数...都可以
    watchFn(() => {
      console.log(`${obj.name}被响应了`)
    })

    watchFn(() => {
      console.log(`${obj.age}被响应了`)
    })

    depend.notify()

    setTimeout(() => {
      obj.name = "curry"
      depend.notify()
    }, 3000);

此时我们就实现了一个简单的响应式

 但是这里有一个问题，我们每次修改obj属性时，得手动去调用notify()，这有点不太响应式

将上面的代码使用Proxy代理监听属性的变化，自动执行notify()

 但是我们看到控制台的打印结果，我们明明是只对name属性进行了修改，但是age的响应函数也被执行了，我们应该让每一个属性对应一个depend依赖

    const obj = {
      name: '张三',
      age: 19
    }

    // 类具有更好的收集性
    class Depend {
      constructor() {
        //这里使用Set是为了解决在watch函数中多次引用同一个属性会创建多个相同函数的问题，因为Set存储的数据是不重复的
        this.reactives = new Set()
      }

      addDepend(fn) {
        this.reactives.add(fn)
      }

      notify() {
        this.reactives.forEach(fn => fn && fn())
      }
    }
    const objProxy = new Proxy(obj, {
      get(target, key) {
        // 不了解Reflect可以去mdn看看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect
        return Reflect.get(target, key)
      },
      set(target, key, newValue) {
        Reflect.set(target, key, newValue)
        depend.notify()
      }
    })
    //定义一个监听对应函数变化的函数, 形参fn接收变化的函数
    const depend = new Depend()
    function watchFn(fn) {
      depend.addDepend(fn)
    }

    //这里不限于使用箭头函数，匿名函数，命名函数...都可以
    watchFn(() => {
      console.log(`${objProxy.name}被响应了`)
    })

    watchFn(() => {
      console.log(`${objProxy.age}被响应了`)
    })

    depend.notify()

    setTimeout(() => {
      objProxy.name = "curry"
    }, 3000);

接下来我们来实现属性对应独立的依赖的方法

    const obj = {
      name: '张三',
      age: 19
    }

    // 类具有更好的收集性
    class Depend {
      constructor() {
        //这里使用Set是为了解决在watch函数中多次引用同一个属性会创建多个相同函数的问题，因为Set存储的数据是不重复的
        this.reactives = new Set()
      }

      addDepend(fn) {
        this.reactives.add(fn)
      }

      notify() {
        this.reactives.forEach(fn => fn && fn())
      }
    }

    // 获取依赖, 根据第一个参数对象拿到map，再根据key去获取依赖
    const weakMap = new WeakMap()
    function getDepend(target, key) {
      let map = weakMap.get(target)
      // 在第一次获取的时候肯定是没有对应的依赖的
      if (!map) {
        map = new Map()
        weakMap.set(target, map)
      }

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

      return depend
    }

    const objProxy = new Proxy(obj, {
      get(target, key) {
        // 不了解Reflect可以去mdn看看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

        // 在每个响应式函数中获取的obj属性都会先执行get，可以获取对应的依赖
        const depend = getDepend(target, key)
        depend.addDepend(reFn)
        return Reflect.get(target, key)
      },
      set(target, key, newValue) {
        Reflect.set(target, key, newValue)
        // 当我们在修改值时，获取对应的依赖，调用notify 执行对应的函数即可 
        const depend = getDepend(target, key)
        depend.notify()
      }
    })
    //定义一个监听对应函数变化的函数, 形参fn接收变化的函数
    // const depend = new Depend()
    let reFn = null;
    function watchFn(fn) {
      reFn = fn
      fn()
      reFn = null
    }

    //这里不限于使用箭头函数，匿名函数，命名函数...都可以
    watchFn(() => {
      console.log(`${objProxy.name}被响应了`)
    })

    watchFn(() => {
      console.log(`${objProxy.age}被响应了`)
    })

    setTimeout(() => {
      objProxy.name = "curry"
    }, 3000);

 此时我们修改name，就只会执行对应的name依赖，age的响应函数就不会被执行了

但是如果我们有多个对象，就要去再重新写一下new Proxy ，换一种封装的方法，将Proxy也封装起来

    // 类具有更好的收集性
    class Depend {
      constructor() {
        //这里使用Set是为了解决在watch函数中多次引用同一个属性会创建多个相同函数的问题，因为Set存储的数据是不重复的
        this.reactives = new Set()
      }

      addDepend(fn) {
        this.reactives.add(fn)
      }

      notify() {
        this.reactives.forEach(fn => fn && fn())
      }
    }

    // 获取依赖, 根据第一个参数对象拿到map，再根据key去获取依赖
    const weakMap = new WeakMap()
    function getDepend(target, key) {
      let map = weakMap.get(target)
      // 在第一次获取的时候肯定是没有对应的依赖的
      if (!map) {
        map = new Map()
        weakMap.set(target, map)
      }

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

      return depend
    }
    function reactive(obj) {
      return new Proxy(obj, {
        get(target, key) {
          // 不了解Reflect可以去mdn看看 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Reflect

          // 在每个响应式函数中获取的obj属性都会先执行get，可以获取对应的依赖
          const depend = getDepend(target, key)
          depend.addDepend(reFn)
          return Reflect.get(target, key)
        },
        set(target, key, newValue) {
          Reflect.set(target, key, newValue)
          // 当我们在修改值时，获取对应的依赖，调用notify 执行对应的函数即可 
          const depend = getDepend(target, key)
          depend.notify()
        }
      })
    }

    const obj = {
      name: '张三',
      age: 19
    }

    const objProxy = reactive(obj)
    //定义一个监听对应函数变化的函数, 形参fn接收变化的函数
    // const depend = new Depend()
    let reFn = null;
    function watchFn(fn) {
      reFn = fn
      fn()
      reFn = null
    }

    //这里不限于使用箭头函数，匿名函数，命名函数...都可以
    watchFn(() => {
      console.log(`${objProxy.name}被响应了`)
    })

    watchFn(() => {
      console.log(`${objProxy.age}被响应了`)
    })

    setTimeout(() => {
      objProxy.name = "curry"
    }, 3000);

    const infoProxy = reactive({
      address: "金州"
    })

    watchFn(() => {
      console.log(`我的家在${infoProxy.address}`)
    })

    setTimeout(() => {
      infoProxy.address = "勇士"
    }, 5000);

Vue2的方式，就是采用Object.defineProperty 其实这个api在设计时并不是为了响应式而生的，所以我们还是应该使用Proxy

    // 类具有更好的收集性
    class Depend {
      constructor() {
        //这里使用Set是为了解决在watch函数中多次引用同一个属性会创建多个相同函数的问题，因为Set存储的数据是不重复的
        this.reactives = new Set()
      }

      addDepend(fn) {
        this.reactives.add(fn)
      }

      notify() {
        this.reactives.forEach(fn => fn && fn())
      }
    }

    // 获取依赖, 根据第一个参数对象拿到map，再根据key去获取依赖
    const weakMap = new WeakMap()
    function getDepend(target, key) {
      let map = weakMap.get(target)
      // 在第一次获取的时候肯定是没有对应的依赖的
      if (!map) {
        map = new Map()
        weakMap.set(target, map)
      }

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

      return depend
    }
    function reactive(obj) {
      Object.keys(obj).forEach(key => {
        let value = obj[key]
        Object.defineProperty(obj, key, {
          get() {
            // 在每个响应式函数中获取的obj属性都会先执行get，可以获取对应的依赖
            const depend = getDepend(obj, key)
            depend.addDepend(reFn)
            return value
          },
          set(newValue) {
            value = newValue
            // 当我们在修改值时，获取对应的依赖，调用notify 执行对应的函数即可 
            const depend = getDepend(obj, key)
            depend.notify()
          }
        })
      })
      return obj

    }

    const obj1 = {
      name: '张三',
      age: 19
    }

    const objProxy = reactive(obj1)
    //定义一个监听对应函数变化的函数, 形参fn接收变化的函数
    // const depend = new Depend()
    let reFn = null;
    function watchFn(fn) {
      reFn = fn
      fn()
      reFn = null
    }

    //这里不限于使用箭头函数，匿名函数，命名函数...都可以
    watchFn(() => {
      console.log(`${objProxy.name}被响应了`)
    })

    watchFn(() => {
      console.log(`${objProxy.age}被响应了`)
    })

    setTimeout(() => {
      objProxy.name = "curry"
    }, 3000);

    const infoProxy = reactive({
      address: "金州"
    })

    watchFn(() => {
      console.log(`我的家在${infoProxy.address}`)
    })

    setTimeout(() => {
      infoProxy.address = "勇士"
    }, 5000);

致辞，实现完毕，有疑问或者建议欢迎下方留言

前端初学者0518
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue3的代码改成vue2的转换
weixin_40945354的博客
04-02 8932
vue3 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue的方法_侠课岛(9xkd.com)</title> <script src="https://unpkg.com/vue@next"></script> </head> <body> <div id="hello-vue" class="
vue2移动端响应式模板
02-21
Vue2 移动端响应式模板是为适应各种屏幕尺寸的移动设备而设计的一种开发框架。这个模板基于Vue2，利用了lib-flexible和postcss-plugin-px2rem这两个关键工具，实现像素单位（px）到相对单位（rem）的自动化转换，...
TS手写简陋版reactive响应式原理(依赖收集，依赖更新)
weixin_42125732的博客
05-31 5720
我们首先new了一个weakMap，weakMap只接受object的类型，target正好是一个对象，然后我们通过target获取到对应的内部Map，我们在通过key获取到Set的集合，此时内部存储的就是一个个所收集到的依赖。我们简单的可以就把他理解成一个依赖，用户使用了effect函数过后，里面的响应式数据发生变化后会重新执行传递进去的回调函数，vue2中收集的依赖对应watcher，vue3收集的依赖实际是effect，他们两者实现功能实际上是一样的。，然后去递归进行依赖收集，并不是直接像。
TS基本类型的响应式数据
weixin_54498224的博客
01-26 378
作用：将一个响应式对象中的每一个属性，转换为。若需要一个响应式对象，且层级较深，推荐使用。若需要一个基本类型的响应式数据，必须使用。接收的是对象类型，内部其实也是调用了。定义的响应式数据是“深层次”的。若需要一个响应式对象，层级不深，的实例对象，简称：响应式对象。（基本类型不要用它，要用。重新分配一个新对象，会。
【Vue】浅谈vue2、vue3响应式原理，vue中数组的响应式，响应式常见问题分析
余浩的博客
02-16 2120
Vue 最标志性的功能就是其低侵入性的响应式系统。组件状态都是由响应式的 JavaScript 对象组成的。当更改它们时，视图会随即自动更新。vue2使用Object.defineProperty实现响应式。vue3使用Proxy实现响应式。
Vue2 和Vue 3的区别
热门推荐
weixin_56263402的博客
01-30 3万+
发现的不错的文章，链接已经贴到文中了
vue3项目框架，包含响应式布局
最新发布
04-29
3. **Ref和Reactivity**：Vue3的响应式系统进行了重构，使用了新的ref和reactive API，它们提供了更底层的访问和控制能力。Ref可以用来创建响应式引用，而reactive函数则可以将整个对象转换为响应式的。 4. **模板...
利用JS响应式修改vue实现页面的input值
10-16
在本文中，我们将深入探讨如何利用JavaScript响应式地修改Vue中的页面输入值，以便在特定场景下实现自动填充和触发相应操作。 首先，让我们回顾一下问题的背景。在基于Vue的登录页面中，有一个需求是当从APP端调用...
Vue3 响应式系统简单实现.zip
01-02
Vue3，springboot，element-ui使用技巧，实战应用开发小系统参考资料，源码参考。 详细介绍了一些Qt框架的各种功能和模块，以及如何使用Qt进行GUI开发、网络编程和跨平台应用开发等。 适用于初学者和有经验的开发者...
Vue3.0数据响应式原理详解
10-16
在Vue3中，响应式系统的实现主要依赖于ES6的`Proxy`和`Reflect`对象，这两个新特性使得Vue能够更加精细地监控数据的变化。 1. **ES6 Proxy**: `Proxy`允许我们创建一个代理对象，该对象可以拦截和控制对原始对象的...
简写Vue2&&Vue3.0实现原理
weixin_36106791的博客
03-23 88
Vue2.x是通过 object.defineProperty来实现双向数据绑定的。 以下是基本实现的小demo html： <input type="" name="" id="text" onkeyup="show()"> <h1 id="showText"></h1> js: var obj = {};//首先定义一个空的对象 var targetValue=document.getElementById('text'); var showValue = do
Vue2：状态管理 Vuex 3.x
孤安先生的博客，作者主站正在重构中，敬请期待！
11-17 755
一般只有组件之间共享的数据，才有必要存储到 vuex 中，对于组件的私有数据，依旧存储在组件自身的 data 中。
vue2和vue3的区别
guoxuying的博客
07-04 1万+
vue2.x和vue3.x的区别
vue3和vue2的区别
iphonepl的博客
03-23 299
vue3和vue2区别
Vue3跟Vue2的区别（超详细，要收藏）
常来常往，共同成长
01-22 1万+
Vue 新版本的理念成型于 2018 年末，当时 Vue 2 的代码库已经有两岁半了。比起通用软件的生命周期来这好像也没那么久，但在这段时期，前端世界已经今昔非比了。在我们更新（和重写）Vue 的主要版本时，主要考虑两点因素：首先是新的 JavaScript 语言特性在主流浏览器中的受支持水平；其次是当前代码库中随时间推移而逐渐暴露出来的一些设计和架构问题。
Vue3和Vue2的区别
大香蕉的博客
02-17 1万+
Vue3和Vue2的区别 vue3和vue2生命周期对比
数据响应 vue2 $set和vue3 reactive
tengyuxin的博客
04-12 1229
vue 里面常用的就是数据响应，理解原理才是最重要的。 下面是介绍，向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。 vue2和vue3的不同实现方式 手动实现数据响应，练习vue2的 Object.defineProperty，代码如下： 案例思路：在input框中输入内容，p标签显示input框输入的内容 <!DOCTYPE html> <html lang="en"> <head>
vue3和vue2的响应式原理
07-28
Vue3和Vue2的响应式原理有一些区别。 在Vue2中，Vue使用了Object.defineProperty来实现响应式。它通过劫持对象的getter和setter方法，当数据发生变化时，能够触发相应的更新。 而在Vue3中，Vue采用了Proxy来实现...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值