简单的vue2和vue3的数据双向绑定

121 阅读1分钟

#一、 vue2的defineProperty newobj是obj的深拷贝,如果get返回的是obj.name会无限触发get造成死循环,控制台报错。

let obj ={
      name:""
     }
let newObj =JSON.parse(JSON.stragify(obj))
Object.defineProperty (obj,"name",{
    get:function(){
        return newobj.name
    },
    set:function(val){
        newobj.name=val
        observe()
    }
)

function observe () {
//set更新新值后的操作
}

setTimeout(() => {
        object.name = "vue2"
    }, 1000)

二、vue3的proxy

target是你的目标对象,prop是它的属性,set中比get中多了一个value,是要改变的值

let obj ={
      name:""
     }
let newobj = new Proxy (obj,{
    get(target,prop){
        return target[prop] 
    },
    set(target,prop,value){
        target[prop] = value
         observer()
    }
})
function observe () {
//set更新新值后的操作
}

setTimeout(() => {
        object.name = "vue2"
    }, 1000)
    - 优点:
    - 直接监听对象而非属性
    - 直接监听数组的变化
    - 拦截方式较多(有13种方式)
    - Proxy返回一个新对象,可以只操作新对象达到目的,而Object.defineProperty只能遍历对象属性直接修改(需要用深拷贝进行修改)
    - Proxy作为新标准将受到浏览器厂商重点持续的性能优化