1.Vue2.X的数据双向绑定原理：采用的是Object.defineProperty()方法
<!-- 1.Vue2.x采用的数据双向绑定原理 --><input type="text" v-model><p v-bind></p><script>// 1.获取行内属性[v-model]let txt = document.querySelector('[v-model]');// 2.input框实现输入值txt.oninput = function(){// 3.将获取到的值赋给obj.nameobj.name = txt.value;}let obj = {};// 4.IE8以及以下浏览器不识别该用法，自带了get和set方法// get的得到值变化，set是设置值的变化Object.defineProperty(obj,'name', {get(){console.log('get被调用了');},// set自带一个参数set(value){console.log('set被调用了');// 获取到p的属性let p = document.querySelectorAll('[v-bind]')[0];// 赋值p.innerHTML = value;}});// obj.name = 'summer'; // 触发了set// console.log(obj.name); // 触发了get</script>
2.Vue3.0实现数据的双向绑定原理：采用的是Proxy方法,proxy是个对象
<input type="text" v-model><p v-bind></p><script>let txt = document.querySelector('[v-model]');txt.oninput = function(){p.obj = txt.value;}let obj = {};let p = new Proxy(obj,{// 1.目标对象// 2.被获取的属性值// 3.Proxy或继承Proxyget(data, property, receiver){// console.log('get被调用了');},// 1.目标对象// 2.被获取的属性值// 3.被获取的value值// 4.最初被调用的对象Proxyset(data, property, value, receiver){// console.log('set被调用了');let p = document.querySelectorAll('[v-bind]')[0];p.innerHTML = value; }});// p.name = 'summer'; // set被调用了// console.log(p.name); // get被调用了</script>3.proxy比Object.defineProperty好在哪里？
proxy优势：
A.可以直接监听对象而非属性
B.可以直接监听数组的变化
C.Proxy有多达13种拦截方式，不限于apply、ownKeys、deleteProperty、has等等是Object.defineProperty不具备的
D.Proxy返回的是一个新对象，可以只操作新的对象达到目的，而Object.defineProperty只能遍历对象属性直接修改
Object.defineProperty的优势：
A.兼容性好，支持IE9，而Proxy的存在浏览器兼容性问题，而且无法用polyfill磨平。