双向绑定的原理也叫响应式原理,Vue它是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()属性的setter、getter,在数据变动时发布消息给订阅者,触发相应的监听回调,来完成双向绑定。
Object.defineProperty()方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性,并返回此对象。
Object.defineProperty()方法接收3个参数:
第一个参数:需要定义属性的当前对象;
第二个:当前需要定义的属性名;
第三个:属性描述符;
vue3双向数据绑定使用的是代理,与Vue2相比的好处在于不消耗性能,因为Vue2使用Object.defineProperty()方法嵌套深层的话需要使用递归比较耗性能,而Vue3使用代理则不用。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial-scale=1.0"> <title>vuejs-iview-admin</title> </head> <body> <input type="text"> <span id="text"></span> <script> var text = document.getElementById('text'); var data = {}; var value = '';//全局变量用于set设置和get取值 Object.defineProperty(data, "name", {//属性描述 //监听数据发生变化设置值,setter set(val) {//监听属性name的变化,val其实就是属性name text.innerHTML = val; value = val; }, //获取值getter get() { return value; } }) //监听input事件 window.addEventListener('input', function (e) { data.name = e.target.value; console.log(data.name) }); </script> <div id="app"></div> <!-- built files will be auto injected --> </body> </html>