vue2.0双向数据绑定原理--Object.definePro

vue已经用了好久啦，面试的时候经常会被问到双向数据绑定的原理，之前一直理解得模模糊糊，闲下来仔细研究了一下，然后就有了这篇文章惹~~(●'◡'●)

1. 开始前我们要了解一下，Object.defineProperty是啥呢？？？

首先来了解下Object.defineProperty的语法：

Object.defineProperty(obj, prop, descriptor)

参数：

obj：要在其上定义属性的对象

prop：要定义或修改的属性的名称

descriptor ：将被定义或修改的属性描述符。

返回值：

被传递给函数的对象

简单解释，Object.defineProperty是ES5中的属性，具有传入一个描述对象即可描述一个对象的属性的特性。

2.vue双向数据绑定实现

//定义一个对象

const data = {

    _a :1,

     _b : 2

}

Object.keys(data).forEach(key=>{

   const newKey = key.slice(1)

   Object.defineProperty(data,newKey,{

       get(){

        console.log(`read data's propery: ${newKey}`) //读取属性

        return data[key]

      },

      set(v){

        console.log(`set data's propery:${newKey},value:${v}`) //设置属性

        this[key] = v

   },

    enumberable: true

     })

     Object.defineProperty(data,key,{

      enumerable: false

     })

   })

data.b = 3 //传入新值

console.log(data)

在这个例子中，data作为一个消息发布者，在将data所有属性利用Object.defineProperty定义了他们的getter,setter后，每次更改data属性时，都将执行setter中定义的发布通知给watcher的逻辑。

总结来讲，就是利用Object.defineProperty的get(),set()方式，通过watcher作为桥梁通信，来完成数据变化 —>视图更新这一过程。