vue2双向数据绑定原理

vue.js文件

class Vue{

constructor(options){

this.$data = options.data

// 调用数据劫持的方法

Observe(this.$data)

// 属性代理

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

Object.defineProperty(this,key,{

enumerable:true,

configurable:true,

get(){

return this.$data[key]

},

set(newValue){

this.$data[key] = newValue

}

})

})

// 调用模板编译的函数

Compile(options.el,this)

}

}

// 定义一个数据劫持的方法

function Observe(obj){

// 递归的终止条件

if(!obj || typeof obj !== ‘object’) return

const dep = new Dep()

// 通过Object.keys(obj) 获取到当前obj上的每个属性

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

// 当前被循环的key所对应的属性值

let value = obj[key]

// 把value这个子节点，进行递归

Observe(value)

// 需要为当前的key所对应