双向绑定，也就是说js中的数据传到页面，页面中的内容到js，实现同步更新，简略的演示能够间接复制下放HTML代码运行。
在这个例子中，咱们应用defineProperty ，Object.defineProperty() 办法会间接在一个对象上定义一个新属性，或者批改一个对象的现有属性，并返回此对象。详细信息能够自行查看MDN文档。
简略来说，defineProperty 就是一个监听器，监听对象中某一个属性被拜访和批改，在Vue2.0中就是采纳defineProperty
注意事项
- 在应用get函数监听属性的时候，不能间接监听以后属性，否则会呈现死循环。所以在应用前我将对象进行浅拷贝的起因
- 每一个defineProperty只能对一个对象属性进行监听，所以你必须在应用之前就得晓得属性的名字，然而很多时候属性是动静生成的，，所以就很麻烦。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1 id="hname"></h1> <input type="text" id="inputname"></body><script> let stu = { name: "" } let newstu = { ...stu };//浅拷贝 //监听器 Object.defineProperty(stu, "name", { get() { return newstu.name; }, set(val) { if (val === newstu.name) return; newstu.name = val; doubleBind(); } }) //将数据传到页面中 function doubleBind() { document.querySelector("#hname").innerHTML = stu.name; inputname.value = stu.name;//id能够间接应用 } //输入框事件，将页面中数据返回 inputname.oninput = function () { stu.name = inputname.value; } doubleBind() setTimeout(() => { stu.name = "Mary"; }, 1000)</script></html>defineProperty的弊病很显著，在ES6中提出了Proxy， 在Vue3.0中也将应用Proxy代替defineProperty，在Proxy中，咱们能够在监听整一个对象属性的变动。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> <h1 id="hname"></h1> <input type="text" id="inputname"></body><script> let stu = { name: "12354" } //监听器处理函数 //监听器 stu = new Proxy(stu, { get(target, prop) { return target[prop]; }, set(target, prop,val){ if (val === target.prop) return; target[prop] = val; doubleBind(); } }); //将数据传到页面中 function doubleBind() { document.querySelector("#hname").innerHTML = stu['name']; inputname.value = stu['name'];//id能够间接应用 } //输入框事件，将页面中数据返回 inputname.oninput = function () { stu['name'] = inputname.value; } doubleBind() setTimeout(() => { stu['name'] = "Mary"; console.log(stu); }, 1000)</script></html>比照两个例子，眼尖的friend会发现，第一个例子中我拜访对象属性应用的是stu.name,而在第二个例子中应用的是stu['name']的形式。在《javascript高级程序设计》
援用类型的那一章提到：一般来说，拜访对象属性时应用的都是点表示法，这也是很多面向对象语言中通用的语法。不过，
在 JavaScript 也能够应用方括号表示法来拜访对象的属性。除非必须应用变量来拜访属性，否则咱们倡议应用点表示法。在咱们第二个例子Proxy中，prop是一个变量，所以咱们应用方括号。特地要留神，stu.name和stu[name]是不一样的，当然如果有内部变量name=“name“，就一样了
最初
想要学习java根底或者进阶java 的同学私信回复 材料
支付一线大厂Java面试题总结+阿里巴巴泰山手册+各知识点学习思维导+一份300页pdf文档的Java外围知识点总结！
这些材料的内容都是面试时面试官必问的知识点，篇章包含了很多知识点，其中包含了有基础知识、Java汇合、JVM、多线程并发、spring原理、微服务、Netty 与RPC 、Kafka、日记、设计模式、Java算法、数据库、Zookeeper、分布式缓存、数据结构等等。