//响应式系统 基本原理
/*
Object.defineProperty( obj, prop, descriptor )
obj:目标对象·
prop:需要操作的目标对象的属性名
descriptor:描述符
*/
//cb function 用来模拟视图更新 调用它即表示试图更新
function cb(val){
//视图渲染
console.log('视图更新了')
}
//defindReactive function 该方法通过Object.defineProperty来实现对对象的响应式化
/*
入参是一个 obj（需要绑定的对象）、key（obj的某一个属性），val（具体的值
*/
function defineReactive(obj,key,val){
Object.defineProperty(obj,key,{
enumerable:true,
configurable:true,
get:function(){
return val
},
set:function(newVal){
if(newVal === val)return
cb(newVal)
}
})
}
//observer
//该函数传入一个value（需要响应式化的对象） 通过变量将将每个属性进行defineReactive 处理
function observer(value){
if(!value || (typeof value !=='object')){
return
}
Object.keys(value).forEach( (key) => {
defineReactive(value,key,value[key])
})
}
//vue
class Vue{
//vue 构造类
constructor(options){
this._data = options.data;
observer(this._data)
}
}
//最后 new vue（） 执行
let o = new Vue({
data:{
test:'wo shi test'
}
})
o._data.test = 'hello vue '