The foregoing

11/9 sunny

Hello everyone, good Friday, after today, we welcome a happy double Holiday. As usual, before starting to write articles, to talk. My friends may find that the frequency of my updated articles is relatively fast. It’s only been two weeks since I last wrote.

Why update frequency?

That is: refuse to be lazy, want to do one thing well, or need to persist. And writing articles, not only for sharing, but also for self-consolidation and learning.

Then today’s content is that we need to have a certain understanding of VUE oh!

Ok, let’s start today’s text. Let’s go

The body of the

Vue3 responsive

Speaking of the response of VUe3, let’s first talk about the response of VUe2. In vue2, response_type, data processing and binding are performed directly in data, return value, and this can be done. However, vuE3 can be said to be a major change in vuE2 processing mechanism.

Instead of using data, vue3 uses setup, ref, and Reactive.

So what does the reactive mechanism in VUe2 do? Look at the code:

    Object.defineProperty(data,'count',{
        get(){},
        set(){}
    })
        
Copy the code

The above code, I believe everyone is familiar with, get, set data read and modify. However, in this way, you can only perform these two operations on existing data and cannot satisfy other requirements. For example:

If I have an object. I need to add a new attribute to this object or remove an existing attribute. The above method is not effective, also can not be responsive.

Again, if I have an array and I need to turn that array into a responsive array, what do I do? Do I just have to rewrite the array, update the list of elements in the array that need to be updated,

Again, if I update an element directly by subscript, will it be responsive? Obviously not. So that’s why you need to use $set() to respond to this situation.

Vue3, then, is not exactly like vuE2. Instead, it monitors and responds to data through Proxy and Reflect.

Before we look at how vue3’s responsivity works, we can take a quick look at these two methods. The Proxy, Reflect.

Proxy

How to understand Proxy? The official terminology is obscure, but it’s simply one sentence: Implement a data broker.

For convenience, I have posted the grammar and related explanations:

Grammar:

const p = new Proxy(target, handler)
Copy the code

  • Handler contains a placeholder object for a trap, which can be translated as a handler object.

  • traps

    Provides methods to access properties. This is similar to the concept of a catcher in an operating system.

  • target

    The object is virtualized by Proxy. It is often used as the storage back end of an agent. Validate invariants (semantics that remain unchanged) about an object’s unextensibility or unconfigurable properties against the target.

Target: is the target you want to represent. Handler: The handler that monitors your target object. It is also an object and contains multiple methods that can be used as needed.

Reflect

Again, what to make of Reflect? It can also be simply understood as a sentence: is a dynamic operation on the object being proxied. And it is used in conjunction with a handler in Proxy.

One thing to notice is that this method can’t be instantiated, so it can’t be new.

Ha ha ha, feel said so much, rather than look at a piece of code actually:

// Target object const usr ={name:haha, age:30, child:{name:xixi, age:18}} // The proxy object requires two parameters and is an object. The first one is the target, Const pro = new Proxy(usr,{// read get(target, property){return reflect.get (target, property)}, Set (target, property,value){return reflect. set(target, property,value)} property){ return Reflect.deleteProperty(target, property) } // ... Pro.name ='wawa' // wawa pro.child.age = 100 // 100 // Add pro.score = 98 // add score attribute in usr // delete delete pro.name // delete name detele pro.child.name // delete name of child typeCopy the code

One thing to note is that Reflect must be reflected in each method, because it’s the key to doing the responsivity, and without it, none of your actions will work on the target object.

Have you ever wondered why the response of VUE3 has changed?

Vue3 requires setup, Reactive, and ref. Vue3 requires setup, reactive, and ref. Isn’t that tedious?

Why is that? As you can see, vue2 is reactive via Object.defineProperty. So what’s the downside of this? Think about it for a few minutes.

DefineProperty adds a get and set method to every attribute in the Object to make it responsive. So this actually creates an overhead problem.

To put it simply: if an object has n properties underneath it, then there should be twice as many get and sets of n. So you can imagine the disadvantages of this.

In VUe3, you only need one proxy object, one Reflect object, to be responsive with no additional overhead. And, as you can see in the example above, this agent is a deep agent, which is reactive and can respond to not only level 1 properties but even multiple sets of properties, which explains why reactive({}) is a deep agent. (Of course, there are shallow proxy methods, we won’t talk about that today).

Okay, so reactive, let’s talk a little bit about setup, ref, and Reactive.

setup

The life cycle

Setup is executed before BeforeCreate, which is clearly written in the vue3 lifecycle, so what do you need to notice here?

When setup is executed, the component is not yet created, so it is not yet instantiated.

The answer is yes. Check out console.log in the lifecycle.

merge

You can write vue2 code in vue3. What if a vue file contains both vue3 setup and vue2 data and methods?

That’s easy. Write a code to see if you know:

setup(){ const a =10 ; const aaa = ()=>{ console.log('hhhhhh') } return{ a, aaa } }, data(){ return { b:20 } }, Log ('xixixixi')}}, mounted(){console.log(this)}  Proxy:Object handler:Object Target:{ a:10, b:20, aaa(), bbb() }Copy the code

If the vue file contains both vue3 code and VUe2 code, it will be merged into a component object property and given to the Proxy.

Say this, may small friends want to laugh, then I write a setup, other use data to do, is not beautiful. Hahaha, I have never tried it, anyone with ideas can try it.

Async steup(){} async steup(){} async steup(){} async steup(){} So no.

Okay, so that’s all about setup, and then a little bit about REF and Reactive.

ref & reactive

Refs and Reactive are known to process data and objects, but refs can also process objects. When called, the.value method is used to manipulate the data.

In addition, if an object is added to ref, it will be processed by Reactive to generate a proxy object. This agent is also a deep agent. You can nest as many levels as you want.

The code demonstration here is also very simple, just need to define and go to console.log to see

Const a = ref(1) const aa = ref({name:'haha',age:18}) const aaa = reactive({score:88}) console.log(a,aa,aaa Proxy:Object exists in aaCopy the code

So much for this piece, heh heh, finally, leave a small question for you to think about. Look down 👇

Template template

Why doesn’t the vue file in VUe3 require a div root tag in the template?

Let me know in the comments section

conclusion

That’s the content of this issue, please point out if there is something wrong.

And then about the last article, about hitting a brick wall. In fact, now also think, do their own things well, do their own things steadily, all to the opportunity and fate.

Well, that’s it for this episode. If you want to hear more, you can leave a comment.

Hey, hey, bye