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实现双向数据绑定的原理的主要内容,如果未能解决你的问题,请参考以下文章

vue数据双向绑定原理-observer

剖析Vue原理&实现双向绑定MVVM

理解VUE2双向数据绑定原理和实现

vue数据双向绑定原理

前端面试被问到,vue实现数据双向绑定,原理是什么

Vue的双向数据绑定原理