vue3.0 Proxy和vue2.0 Object.defineProperty的对比

503 阅读1分钟

最近特想整理一下自己用过的一些知识点,总结一下,分享出来也自己复习一下,包括Vue 3.0新特性和Vue 2.0的一些特性以及实现方法。

1、Proxy的优势

1、可检测数组索引的变化和 length 的变化。

2、可监测属性的添加、删除动作。

3、Proxy有13中拦截方法,如has、ownKeys、deleteProperty 是 Object.defineProperty 不具备的。

4、Proxy返回的是一个新对象,我们可以直接操作它。而Object.defineProperty却是遍历对象修改对应属性。

5、对 Map、Set、WeakMap 和 WeakSet 的支持。

8、Proxy 作为新标准,长远来看,JS引擎会继续优化 Proxy ,但 getter 和 setter 基本不会再有针对性优化。

2、Proxy的劣势

1、Proxy的兼容性差。

2、目前对Proxy还没有完整的polifill方案。

3、Object.defineProperty的优势

兼容性好,支持 IE9。

4、Object.defineProperty的劣势

1、Object.defineProperty 只能劫持对象的属性。

2、Object.defineProperty 不能监听数组。

3、Object.defineProperty 不能对 es6 的 Map,Set 监听。

4、Object.defineProperty 不能监听新增和删除操作,只能通过 Vue.set()和 Vue.delete来实现新增或者删除

5、Proxy的实现方法(简例)

let obj = { id: '1' }

let proxy = new Proxy(obj, {
    get: function(el, key) {
        return el[key] || null
    },
    set: function(el, key, val) {
        el[key] = val;
    }
})
    
console.log(proxy.id);        // 1
console.log(proxy.key);        // null

proxy.id = '99';
console.log(proxy.id)         // 99

6、object.defineproperty的实现方法(简例)

let obj = {}
let temp = null
Object.defineProperty(obj, 'key', {
  get: function() {
    return temp
  },
  set: function(val) {
    temp = val
  }
})

obj.key = 'id'
console.log(obj.key)  // id