首先什么是数据响应式 :就是当你对数据进行操作的时候,给你一个反馈信息,你可以捕捉到这个数据进行了变更或者其它操作 ,呢么我们就需要一个 Proxy (代理)
什么是Proxy ?
Proxy: 也就是代理，可以帮助我们完成很多事情，例如对数据的处理，对构造函数的处理，对数据的验证，说白了，就是在我们访问对象前添加了一层拦截，可以过滤很多操作，而这些过滤，由你来定义。 原文:mozilla 的官方定义: https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Proxy
老规矩先上例子
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>proxy</title> </head> <style type="text/css"> .abc{ height: 300px; background:red; } </style> <body> <div class="abc"> </div> <input type="button" name="" id="button" value="获取参数" style="margin-left: 50%" onclick="click_button()"> </body> <script > var b =document.querySelector('.abc'); //获取abc这个对象 var data1= { //创建一个 对象1 name: 'lili', age : '18' } var data2= { //创建一个 对象2 name: 'huahua', age : '19' } b.innerHTML = data1.age //给这个abc对象上展示 data1 的age属性 var p = new Proxy(data1,{ //创建 一个Proxy(代理) 第一个是参数是:对象,第二个参数是函数 set(target,prop,newvalue) //set 属性设置操作的捕捉器。 (对象,属性,新值) { console.log('set...',target,prop,newvalue,"数据在这个时候被更改了") b.innerHTML = newvalue return Reflect.set(target,prop,newvalue); //返回 data1 } }); var p1 = new Proxy(data2,{ get(target,prop) // get 属性读取操作的捕捉器 { console.log('get...',target,prop,"数据在这个时候被获取了") return Reflect.get(...arguments); } }); window.onload = function xiug(argument) { //页面初始化的时候加载 这个函数 setTimeout(function(){ p.age = 21; },1000) setTimeout(function(){ p.name = "xiaoming"; },2000) setTimeout(function(){ console.log(p.name) console.log(p.age) },3000) } function click_button(argument) { console.log(p1.name) } </script> </html>在我们不确定什么时候数据被改变的时候想要刷新界面?改变链接?改变对象? 就用Proxy代理,可以截取. 未完后期有时间再完善,学东西一定要自己动手实践一下,才能吃进去
