This is the second day of my participation in the November Gwen Challenge. Check out the details: the last Gwen Challenge 2021

The old rules are summarized in front:

DefineProperty itself was able to monitor array subscripts, but the Vue team abandoned this feature for performance/experience value, and it was replaced because it could only access the object Proxy’s existing attributes rather than Proxy’s ability to directly Proxy the entire object.

I don’t need to tell you that vue2. X implements data hijacking via Object.defineProperty, and then implements responsiveness in combination with the subscriber pattern. Do not know the students can look at the relevant article, I do not disrelish ugly. We also know that vue2.x hijacked the object via defineProperty, but handled the array by overriding the responsivity of the native method. Why? DefineProperty can be hijacked by array subscript. After all, array objects are one and the same. Here’s what I did:

const arr = ['a'.'b'.'c'.'d'];
function defineReactive(data, key) {
    Object.defineProperty(data, key, {
        get: function() {
            console.log('key:' + key)
        },
        set: function(value) {
            console.log('value:' + value)
        }
    });
};
function Observe(data) {
    Object.keys(data).forEach(function(key) {    
        defineReactive(data, key, data[key])  
    })
};
Observe(arr);

arr[1];
arr[2] = '3';
Copy the code

The console output looks like this:So defineProperty itself iscanThe only thing that monitors array subscripts is Vue passing through pairsPerformance/experience value for moneyDefineProperty is pretty damn aggrieved to consider abandoning this feature.

I also asked You on Github why the defineProperty implementation hijacking is worse than the rewrite array method in terms of performance and experience, but you answered that it was too succinct and I don’t know how to compare the performance of the two, so I’ll just memorize it. 😅

Vue3 and above uses proxy instead of defineProperty. Why is this class?

  1. DefineProperty is an expensive operation because it needs to traverse the entire object and then directly manipulate the object’s properties. So you can only listen for changes in the value of this attribute, but not for additions and deletions of object attributes
  2. Proxy proxies target objects instead of attributes, reducing operations on original objects and maintaining object stability

Tipes: Proxy only proxies the first layer of an object. How does Vue3 handle the Proxy for deep objects? Check if reflect. get is Object, and reactive is used to proxy it.

But there are also articles that say part of the reason is that proxies perform better than defineProperty. Is a defineProperty proxy really better than defineProperty? Proxies Proxies in fact in Performance than Object. DefineProperty, Thoughts on ES6 Proxies Performance

Sum up is defineProperty or a very good method, there is a paper come zhongjue shallow, realize this to practice. Be sure to see more practice, to have their own understanding and cognition, but also thanks to me at the boiling point when a few big guy answers, come on!!

Finally, I wish you study and progress, a successful career! 🎆 🎆 🎆

Tipes: What do you want NextTick to test? Tipes: What do you want NextTick to test?