Vue实现双向数据绑定代码-详解

Vue实现双向数据绑定代码

Vue实现双向数据,通过Object.defineProperty()set()方法get()。即发布订阅、订阅模式,(发布、订阅模式参考资料),对数据进行拦截。实现双向数据绑定(本人上一篇文章有讲过基本原理)。

代码

Object.defineProperty() 传入三个参数:

监听的对象

自定一个属性名(案例中定义为binding,当多个监听用于区分)

json对象,设置get、set方法(对应被调用、被修改)


代码截图


验证

添加一个按钮。点击按钮给p标签赋值,观察input框内值的变换。


代码截图


效果图

注意:

如果不使用上述方法,而采用直接获取DOM并赋值。虽然p标签会改变,但是input框中的内容不会跟随改变。大家可以验证一下(^__^) 嘻嘻……

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容