vue的双向数据绑定怎么实现（简单实现vue的双向绑定）
vue的兴起源于入手简单,对数据的双向绑定,
以及语法的友好性.相对于react的最大优势大概就是数据的双向绑定了.但是你知道双向绑定到底是如何实现的吗?
可能你会说的Object.defineProperty()来实现的.确实没错 但是这只是实现了数据的单向绑定还需要结合订阅发布来实现.
<!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>Document</title> </head> <body> <div> <input type="text" id='input'> <p id='p'></p> </div> </body> </html>
先简单的实现一个页面输入框
页面显示
在实现双向绑定前,我们先熟悉一下Object.defineProperty()语法,MDN给出的解释Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性， 并返回这个对象。
Object.defineProperty(obj, prop, descriptor) obj 要在其上定义属性的对象。 prop 要定义或修改的属性的名称。 descriptor 将被定义或修改的属性描述符。
我们现在需要好好了解一下descriptor, 属性描述描述什么呢? 数据的变化是否可读写,是否可以删除等等 是对于我们定义的obj.prop的一个描述.descriptor函数内部包含set 与 get
get当有该属性的的时候会发生,
set当数据变动的时候发生改变默认值为undefined
拥有以上属性的时候我们就可以开始设计了
const data = {};//定义一个对象 let _data = null//存储数据绑定后的值 防止死循环 const input = document.getElementById('input');//获取input框 const p = document.getElementById('p');//获取p的行展示通过input改变的数据层 Object.defineProperty(data, 'text', { //设置定义data的对象和text属性 set(value) { console.log(value) //当data数据层的值复制给input框 // data.text = value input.value = value _data = value }, get() { return _data } }); input.onchange = function (e) { data.text = e.target.value; p.innerHTML = data.text //将input改变视图层的值赋值给数据层并展示出来 }
输入input时候p标签也改变了说明视图层已经改变数据层
视图层到数据层确定ok
在浏览器中输入改变data中的text属性页面的input同样也改变了
数据层到视图层同样ok
vue则是通过这样的思路去实现框架中的绑定.想深入了解的同学建议去看源码,vue需要对对象的深层次递归遍历来进行绑定.
,免责声明：本文仅代表文章作者的个人观点，与本站无关。其原创性、真实性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容文字的真实性、完整性和原创性本站不作任何保证或承诺，请读者仅作参考，并自行核实相关内容。文章投诉邮箱：anhduc.ph@yahoo.com
