vue2和vue3区别

  • Vue2 和 Vue3 双向绑定方法不同
    • 总结 vue3中没有$set

Vue2 和 Vue3 双向绑定方法不同

Vue2 : Object.defineProperty() 
Vue3 : new Proxy()

vue3 实例

vue2和vue3区别_第1张图片

vue2和vue3区别_第2张图片

数据会更新

const addBtn = () =>{
    obj.c = 3;
} 

vue2实例

vue2和vue3区别_第3张图片

vue2和vue3区别_第4张图片

问题:数据更新了视图没更新

Object.defineProperty() 导致

解决方法:this.$set

methods:{
    addBtn(){
        //数据更新了视图没更新//this.obj.c = 3;
        //console.log( this.obj );
        this.$set( this.obj , 'c' , 3) 
    }
}

总结 vue3中没有$set


let data = {
    a : 1,
    b: 2
}

let vue = {}

for( let k in data ){
    Object.defineProperty(vue, k,{
        get(){
            console.log(获取了); 
            return data[k];
        },
        
        set(){}
    })
}

你可能感兴趣的:(前端杂货铺,前端面试题,vue.js,javascript,前端)