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来代理