vue2 和 vue3 双向数据绑定原理

<!--数据准备-->
let obj = {name: '小眼镜', age: '26'}

<!--vue2-->

Object.keys(obj).forEach((key) => {
  Object.defineProperty(obj,  key,  {
    set(value) {
      obj[key] = value
      console.log('改变值',  value)
    },
    get(){
      console.log('获取值')
      return obj[key]
    }
  })
})
注: 利用Object.defindProperty来进行数据劫持
<!--vue3-->
let hander = {
  get(obj, key) {
    console.log('获取值', obj, key)
    return obj[key]
  },
  set(obj, key, value) {
    console.log('修改结果', obj)
    obj[key] = value
  }
}
function reactive(obj) {
  return new Proxy(obj, hander)
}
注:利用proxy来代理
 
posted @ 2021-12-10 16:24  有肌肉的小眼睛  阅读(203)  评论(0)    收藏  举报