最近特想整理一下自己用过的一些知识点,总结一下,分享出来也自己复习一下,包括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