js proxy 代理模拟vue实现数据双向绑定

最新推荐文章于 2023-03-03 14:41:54 发布
最新推荐文章于 2023-03-03 14:41:54 发布
阅读量141 收藏
点赞数 1
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/wilsunson/p/10280514.html
版权 
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Proxy vue 双向绑定</title>
  </head>

  <body>
    <div id="app">
      <h3 id="papagraph"></h3>
      <input type="text" id="input" />
    </div>
  </body>
</html>

<script>
  const papagraph = document.getElementById('papagraph');
  const input = document.getElementById('input');
 

  const data = {
    text: 'hello'
  }

  const handler = {
    set: function(target, prop, value) {
      if (prop === 'text') {
        target[prop] = value
        papagraph.innerHTML = value
        return true;
      } else {
        return false;
      }
    }
  }
  
  const myTest = new Proxy(data, handler);

  input.addEventListener(
    'input',
    e => {
      myTest.text = e.target.value;
    },
    false
  )

  
</script>

　　

转载于:https://www.cnblogs.com/wilsunson/p/10280514.html

dengling8319
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js中使用Proxy代理实现数据双向绑定
我的个人博客
09-15 580
js 中使用Proxy代理实现数据双向绑定 html代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-s.
理解Proxy及使用Proxy实现vue数据双向绑定操作
10-15
Vue 3为了克服这些缺点，选择了使用Proxy来实现数据响应式系统。 Proxy对象通过接受两个参数来创建：一个是目标对象（target），另一个是拦截器（handler）。拦截器是一个对象，它声明了代理目标对象各种操作的方法...
js：使用proxy代理模拟vue双向绑定
爱酸的博文
01-02 233
【代码】js：使用proxy代理模拟vue双向绑定。
js代理实现双向数据绑定
weixin_43827424的博客
07-06 211
这个是text不绑定: <input type="text" v-model='text' /> <input type="text" v-model='title' /> <input type="text" v-model='title' /> <h4 v-bind="title">这里也会发生更新</h4> "use strict" function View(){ let proxy =
使用 JavaScript Proxy 实现简单的数据绑定
scorpio的世界
03-03 761
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>proxy</title> </head> <body> <h1>使用Proxy 和 Reflect 实现双向数据绑定</h1&gt...
Vue父子组件之间实现的复杂双向绑定
M_Edison的博客
04-01 340
父子组件之间实现的复杂双向绑定 一个需求：现在在组件中有两个input，其中需要实现input的双向绑定（且改变父组件的data值），且输出时第二个input的值时第二个值的100倍。 用到的技术点：父子组件通信，表单的双向绑定 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE
Vue 3.0双向绑定原理的实现方法
10-16
Vue3.0相较于Vue2.0在双向绑定的数据劫持方式上做了改进，使用了Proxy代理代替了Object.defineProperty来实现数据响应式系统。这使得Vue3.0在处理数据响应式时更加高效、方便，同时也带来了更简洁的代码实现方式。 ...
vue使用Proxy实现双向绑定的方法示例
10-17
Vue.js 是一个流行的前端JavaScript框架，它使用数据驱动的视图，这意味着视图会根据数据的状态自动更新。Vue 2.x版本中使用了Object.defineProperty()来实现数据的响应式系统，而在Vue 3.x版本中，框架将核心响应式...
Vue响应原理 definedProperty与proxy实现数据双向绑定
01-08
Vue2 利用definedProperty实现数据绑定 definedProperty 基础使用： var ob={ a:1, b:2 } var _value=ob.a Object.defineProperty(ob,'a',{ //writable:true,//可否修改 //enumerable:false,//是否可被...
vue双向绑定原理（Proxy）
primedream_RYH的博客
08-29 640
vue 3.0将使用proxy 来实现 双向绑定 于是简单做了个 双向绑定的demo <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initi...
js（ES6）的Proxy介绍，利用Proxy实现的双向绑定
最新发布
qq_40482342的博客
03-03 775
Proxy是ES6中提供的新的API，可以用来定义对象各种基本操作的自定义行为 .设计思想主要是基于设计模式中的代理模式，如下图：每次获取proxy，这个proxy就会返回对data的浅拷贝，而要对data中的属性进行增删查等操作，也是直接对proxy。通过对整个对象的代理，就避免了访问之前要明确data中有什么属性的这一个过程。这样就实现了一个解耦合的过程，避免了直接操作data对象。
js实现双向绑定,好用的原生双向绑定
deriva的专栏
12-21 559
s双向绑定采用自主编运用proxy代理的形式实现的，vue3也是通过proxy代理的。 我们知道vue主要的是双向绑定，vue2.0和3.0使用的形式还有所区别： vue2 的双向数据绑定是利⽤ES5 的⼀个 API ，Object.definePropert()对数据进⾏劫持 结合 发布订阅模式的⽅式来实现的。 vue3 中使⽤了 es6 的 ProxyAPI 对数据代理，通过 reactive() 函数给每⼀个对象都包⼀层 Proxy，通过 Proxy 监听属性的变化，从⽽ 实现对数据的监控。
js代理(Proxy) 和 反射(Reflection)
奔跑的痕迹的博客
10-09 1031
在实际开发中经常会遇到js抛出的错误，但是我们有没有想过自己去接管js异常验证，根据自己的需求抛出异常呢？原本也许不行，但是在es6出来后就可以做到了 一、代理(Proxy) 什么是‘代理’ 呢？代理：就是调用new 创建一个和目标（traget）对象一直的虚拟化对象，然该代理中就可以拦截JavaScript引擎内部目标的底层对象的操作；这些底层操作被拦截后会触发响应特定操作的陷阱函数 来看个...
js中使用Proxy实现观察者模式，以及观察者模式在实战中的应用
业余前端的职业经历
04-01 406
观察者模式 又被称作发布-订阅者模式或消息机制，定义了一种依赖关系，解决注意对象和观察者之间的功能耦合。 取自 张容铭版 js设计模式 观察者模式 还是要明白两个核心点 观察目标 和 观察者 这两个 举个例子吧 var obj = { name: 'zyc', csdn: 'yunchong_zhao的博客'}； 这个obj是要被观察的对象 如果这个对象属性被赋值 或者 获取属性值得时候 就要打印出来一句话 那么打印出来的这句话 就可以看成是观察者(观察目标对象的变化) es6新增...
proxy对象实现数据双向绑定
I_recluse的博客
01-29 747
proxy对象顾名思义是对象的代理，对目标对象进行封装成代理对象，以达到读取、修改、查询目标对象属性等操作时起到拦截作用，对目标对象的默认操作进行重新定义。下面看一个例子： let obj = {name: 'zhangsan', age: 20} let objHandler = { get: function(target,propKey){ return '您访问...
用Proxy模拟VUE中的数据双向绑定
wu1737149371的博客
03-11 465
Proxy 用于修改某些操作的默认行为，等同于在语言层面做出修改，所以属于一种“元编程”（meta programming），即对编程语言进行编程。 Proxy 可以理解成，在目标对象之前架设一层“拦截”，外界对该对象的访问，都必须先通过这层拦截，因此提供了一种机制，可以对外界的访问进行过滤和改写。Proxy 这个词的原意是代理，用在这里表示由它来“代理”某些操作，可以译为“代理器”。 详细介绍也...
通过proxy和defineProperty实现v数据双向数据绑定
qq_44777678的博客
01-29 266
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Comp...
js实现数据绑定 Proxy监听数据变化
L_I_S的博客
04-02 1960
js实现数据绑定 Proxy监听数据变化使用背景实现思路代码 使用背景 使用vue或者react习惯了，忽然接到一个需求要做一个说简单不简单但是也不方便使用框架的页面（要服务器渲染的页面）。直接操作Dom元素会使得页面的逻辑一团乱，这里我们手动实现一个简单版的数据绑定 实现思路 话不多说，这里利用Proxy来实现数据绑定，之前Vue使用Object.defineProperty()方法实现的，这里...
使用proxy实现一个双向绑定
小分享
11-08 1933
如何实现 在学习vue的时候，vue是通过劫持数据的变化，监听到数据变化时改变前端视图。 那么要实现双向绑定，必然需要一个监听数据的方法。如文章标题所示，这里使用的proxy实现数据的监听。 当监听到数据变化时，需要一个watcher响应并调用更新数据的compile方法去更新前端视图。 在vue中v-model作为绑定的入口。当我们监听到前端input输入信息并绑定了数据项的...
Vue2与Vue3双向绑定实现原理解析
"本文将详细解释Vue2的双向绑定原理，包括如何通过`Object.defineProperty`实现数据监听，以及编译数据到页面的过程。还将提及Vue3中如何利用`Proxy`来改进这一机制。" Vue.js 的双向绑定是其核心特性之一，它使得...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值