VUE实现双向数据绑定的原理
Posted shuijingcao
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了VUE实现双向数据绑定的原理相关的知识,希望对你有一定的参考价值。
Vue 实现 双向数据绑定 主要采用:数据劫持结合“发布-订阅”模式的方式,通过Object.defineProperty()的 set 和 get,在数据变动时发布消息给订阅者触发监听。
Object.defineProperty( )是用来做什么的?它可以来控制一个对象属性的一些特有操作,比如读写权、是否可以枚举,这里我们主要先来研究下它对应的两个描述属性get和set.如果还不熟悉其用法,请点击这里阅读更多用法。
代码例子:
var Book = {} var name = ‘‘; Object.defineProperty(Book, ‘name‘, { set: function (value) { name = value; console.log(‘你取了一个书名叫做‘ + value); }, get: function () { return ‘《‘ + name + ‘》‘ } }) Book.name = ‘vue权威指南‘; // 你取了一个书名叫做vue权威指南 console.log(Book.name); // 《vue权威指南》
关于 Object.defineProperty,详细参考链接 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
以上是关于VUE实现双向数据绑定的原理的主要内容,如果未能解决你的问题,请参考以下文章