Recently, I would like to sort out some knowledge points I have used, summarize them, share them and review them, including Vue 3.0 new features and Vue 2.0 features and implementation methods.

1. Advantages of Proxy

1, can detect array index changes and length changes.

2. Add and delete actions of monitored attributes.

3, Proxy has 13 interceptor methods, such as has, ownKeys, deleteProperty Object. DefineProperty does not have.

4. The Proxy returns a new object that we can manipulate directly. Object.defineproperty, on the other hand, iterates through the Object to modify the corresponding attribute.

5. Support for Map, Set, WeakMap and WeakSet.

8. Proxy is a new standard. In the long run, JS engine will continue to optimize Proxy, but getters and setters will basically no longer have targeted optimization.

2. Disadvantages of Proxy

1. Poor compatibility of Proxy.

2. Currently, there is no complete polifill scheme for Proxy.

3. Benefits of Object.defineProperty

Good compatibility and support for Internet Explorer 9.

4. Disadvantages of Object.defineProperty

Object.defineproperty can only hijack attributes of an Object.

Object.defineproperty cannot listen on arrays.

Object.defineproperty cannot listen on ES6 Map and Set.

Object.defineproperty can’t listen for additions or deletions. Only additions or deletions can be made through vue.set () and vue.delete

5. Implementation method of Proxy (Simple example)

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
Copy the code

6. Implementation method of Object.defineProperty (Simple example)

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
Copy the code