首页 前端 vue 正文

vue检测对象改变的原理

long 2021-07-28 15:38 vue 人气73

vue中,当data里的数据改变时,会调用响应的set方法。

使用Object.defineProperty方法设置。大概原理如下:

let data = {
'name':'aaa',
'address':'xxxxx'
}
const obs = new Observer(data)
function Observer(obj) {
const keys = Ojbect.keys(obj)
keys.forEach((key)=>{
Object.defineProperty(this, key, {
get(){return obj[key]}
set(val){
//console.log('属性修改了,更新虚拟dom,对比,更新页面dom')
obj[key] = val
}
})
})
}

公众号
小程序
网站统计
  • 文章总数:297
  • 总点击量:55498
  • 评论总数:27
  • 网站运行:548 天