current position:Home>Clonevnode in Vue

Clonevnode in Vue

2021-08-27 09:42:28 Lazy dog small front end

Preface

First , This article is definitely not helpful for our daily development and code , Writing this article is purely for my brain disability , It took so much time to find out and find comfort .

Before reading diff The source code often appears a cloneIfMounted and normalizeVNode These two things , I checked the information at that time , Maybe it's just initialization at night vnode What? , There is no scrutiny , But in research patch When the , The brother appeared again , Then, with cheap hands, he ordered to go in and have a look , Found a cloneVNode, Suddenly there was some doubt , This cloneVNode What exactly do you do .

Waste time

Speaking of clone , I directly thought of render, After all, it must be something that exists to clone . And then find h function .

function h(type, propsOrChildren, children) {
    const l = arguments.length;
    if (l === 2) {
        if (shared.isObject(propsOrChildren) && !shared.isArray(propsOrChildren)) {
            // single vnode without props
            if (isVNode(propsOrChildren)) {
                return createVNode(type, null, [propsOrChildren]);
            }
            // props without children
            return createVNode(type, propsOrChildren);
        }
        else {
            // omit props
            return createVNode(type, null, propsOrChildren);
        }
    }
    else {
        if (l > 3) {
            children = Array.prototype.slice.call(arguments, 2);
        }
        else if (l === 3 && isVNode(children)) {
            children = [children];
        }
        return createVNode(type, propsOrChildren, children);
    }
}
 Copy code 

Have a look , Sure enough, with clone Half a cent doesn't matter . Can't , Can only go to the source code console once , See what kind of vnode Will need to be clone.

<template>
  <div>
    <div>i am a static div</div>
    <div>i am a static div {{number}}</div>
    <button @click="handleChangeNum">{{ number }}  Modify button </button>
  </div>
</template>
 Copy code 

Wrote the simplest example , number For the initial 111, Click on +1.

At the beginning , It didn't show up log Information , After clicking the button , I saw the light .

image.png

In fact, when this log When I came out , I'm basically sure , This should be related to vue3 Static in dom Optimization matters .

Look back , Actually, I was just normalizeVNode Function of , There are also printed messages .

image.png

You can see children Yes 3 individual , however dynamicChilren Only 2 individual , The less one is being clone The plain text div.

Solve the doubts , But do you think it's over here ?

no, Because before h In the function , We found that it was all re createVNode Of , Did not see clone ah , that h Function , How to optimize it .

Continue to waste time

Continue to write sub components helloworld To test my guess .

export default {
  name: 'HelloWorld',
  props: ['number'],
  render() {
    return h(
        'div',
        {
          class: 'home'
        },
        [
          this.number + '222222',
          h('div', 'lalalala')
        ]
    )
  }
}
 Copy code 

That's about it , The parent component just introduced helloworld , Then click the button in the parent component to update number Will trigger the sub assembly render, The next step is to look at the picture and talk .

image.png

First , Will find dynamicChildren Turned into null, And found that lalalala Not by clone.

<template>
  <div class="home">
    {{number + '2222'}}
    <div>
      lalalahahaha
    </div>
  </div>
</template>
 Copy code 

And then put render Change it to template How to write it , Keep looking at the pictures and talking .

image.png

image.png

dynamicChildren Reappear , At the same time, when updating , lalalahahaha By clone 了 .

Continue to waste time

I should have stopped writing here , But the thought of it all here , Why don't you just go on .

Study how we use template Written html, Will be parsed into what it looks like .

image.png

hosted_1 Namely helloworld The father of div, hoisted_2 It's fixed text lalalahahaha, Above is 1112222 了 , good heavens , Sure enough, I wrote to myself h Totally different , It's about openBlock,createBlock These prime unmasked functions .

Look at using your own render Function to write the printing situation , plain , It can't be said to be very similar , It can only be said to be a hair . image.png

Conclusion

This article ends here .

It's not really over , Yes, I want to end , Because I saw it again patchBlockChildren and patchChildren, Simply speaking , Just let me see for myself , It doesn't mean much to write , Will make this boring text , worse .

Although I understand cloneVNode What is it for , however , It doesn't feel any good , What is the conclusion .

Let's not use it ourselves render, Write honestly template Just fine ?

copyright notice
author[Lazy dog small front end],Please bring the original link to reprint, thank you.
https://en.qdmana.com/2021/08/20210827094224070e.html

Random recommended