Vue2.0响应式原理&&Vue3.0响应式原理

2.0

// 监视
function observer(data){
 // 判断是否为对象或者是否为null
 if(typeof data !== 'object' || data === null){
     return data
 }
  // 遍历data中的参数给每一个对象一个get set方法
  for(let key in data){
    defineProperty(data,key,data[key])
  }
}

// 通过es6的Object.defineProperty
function defineProperty(data,key,value){
    observer(value)
   Object.defineProperty(data,key,{
        get(){
            return value
        },
       set(newVal){
        if(value !== newVal){
            observer(newVal)
            updateView()
            value = newVal
        }
       }
   })
}

function updateView(){
    console.log('更新视图')
}

let data = {
    id:1,
    name:'zpwan'
}

// 监视data对象
observer(data)

console.log('data.name',data.name)
// 调用修改data中的变量
console.log('data.id',data.id)
data.name = 'wzpaaa'

console.log('data.name',data.name)