模仿reactive实现原理

简介: 模仿reactive实现原理

  模仿reactive实现原理

  vue中的reactive也是通过proxy来实现的,我们就把reactive的实现作为一个练习。

  首先是实现基础的get和set方法:

  let object = {

  a:1,

  b:2

  }

  let po = reactive(object)

  function reactive(object) {

  return new Proxy(object, {

  set(obj, prop, val){

  obj[prop] = val;

  console.log(obj, prop, val);

  return obj[prop];

  },

  get(obj, prop) {

  console.log(obj, prop);

  return obj[prop];

  }

  })

  }

目录
相关文章
|
8月前
|
JavaScript 前端开发 编译器
解密Vue 3:透过原理看框架,揭开它的神秘面纱
解密Vue 3:透过原理看框架,揭开它的神秘面纱
|
存储 缓存 JavaScript
深入浅出 RxJS 核心原理(响应式编程篇)
在最近的项目中,我们面临了一个需求:监听异步数据的更新,并及时通知相关的组件模块进行相应的处理。传统的事件监听和回调函数方式可能无法满足我们的需求,因此决定采用响应式编程的方法来解决这个问题。在实现过程中发现 RxJS 这个响应式编程库,可以很高效、可维护地实现数据的监听和组件通知。
382 0
深入浅出 RxJS 核心原理(响应式编程篇)
|
7月前
|
存储 前端开发 API
技术笔记:Promise的原理探究及手写Promise
技术笔记:Promise的原理探究及手写Promise
40 0
|
8月前
|
前端开发 JavaScript 容器
第二章 简单实现Hello React案例
第二章 简单实现Hello React案例
|
8月前
|
JavaScript API
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
89 0
|
存储 设计模式 JavaScript
简单小示例彻底搞明白vue双向数据绑定核心原理
vue 很大的一个优势就是双向数据绑定,而在 react 或小程序中是需要我们自己手动 setState、setData 去修改视图数据
86 0
手撸vue3核心源码——响应式原理(reactive以及effect)
手撸vue3核心源码——响应式原理(reactive以及effect)
|
存储 Web App开发 移动开发
【长文慎入】一文吃透 react 事件机制原理
上个月有幸研究了 react 事件机制这个知识点,并且在公司内部把自己的理解进行了分享。现在趁还算热乎赶紧的整理下来,留住这个长脸的时刻。
478 1
【长文慎入】一文吃透 react 事件机制原理
|
JavaScript 前端开发
JS精髓中的精髓,事件进阶使用
1.事件监听器 如果要为一个元素添加多个相同的事件,该如何实现呢?这就需要用到另外一种添加事件的方式了,那就是——事件监听器 所谓的“事件监听器”,指的是使用addEventListener()方法为一个元素添加事件,我们又称之为“绑定事件” 案例:
123 0
JS精髓中的精髓,事件进阶使用

热门文章

最新文章