简单示例介绍 vue2 与 vue 3之间 响应式区别

// vue2 响应式的 Object.defineProperties ，数组或对象触发不了set, 可用splice解决
  export default {
  data(){
    return {
        dataA:{},
        dataB:{}
    }
  },
  mounted(){
        this.dataA = {};
        Object.defineProperties( this.dataA, { 
          test: { 
            defaultValue: 1, 
            get: function () {
              return this.defaultValue;
            }, 
            set: function (val) { 
              this.defaultValue = val; 
              console.log("触发了set dataA") 
            }
          } 
        });

        this.dataA.test=[2,3];
        this.dataA.test[0]=1; // 不触发set，没有更新数据
        this.dataA.test.splice(0,1,1)   // 修改了


        // vue3 响应式的 Proxy ,解决了数组或对象触发不了set, 但低版本浏览器有些不兼容
        this.dataB = {
              test:1
        }
        new Proxy(this.dataB, {
            get (target, key, receiver) {
                return Reflect.get(target, key, receiver)
            },
            set (target, key, value, receiver) {
                Reflect.set(target, key, value, receiver)
            }
        })

        this.dataB.test=[2,3];
        this.dataB.test[0]=1;
     }
}