vue双向绑定原理

最新推荐文章于 2026-01-01 17:43:06 发布

原创最新推荐文章于 2026-01-01 17:43:06 发布 · 159 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js

这篇博客探讨了Vue2和Vue3中实现数据响应的方式。在Vue2中，通过`Object.defineProperty`来劫持对象属性的setter和getter，从而实现数据变化时视图的更新。而在Vue3中，引入了`Proxy`对象，更优雅地实现了相同的目标，当对象属性被修改时自动触发观察者更新视图。示例代码展示了如何在两种版本中监听并更新`name`属性。

let obj = {
  name:'12345'
}

let virtualDom = JSON.parse(JSON.stringify(obj))

Object.defineProperty(obj,"name",{
  get(){
    return virtualDom.name
  },
  set(val){
    virtualDom.name = val
    observer()
  }
})
function observer(){
  document.querySelector('.login-button').innerHTML = obj.name
}
observer()


setTimeout(() => {
  obj.name = "jack"
}, 1000);

let obj = {name:''}

obj = new Proxy(obj,{
  get(targer,prop){
    return targer[prop]
  },
  set(targer,prop,value){
    targer[prop] = value
    observer()
  }
})

function observer(){
 document.querySelector('.login-button').innerHTML = obj.name
}
observer()

setTimeout(() => {
  obj.name = "jack"
}, 1000);