The principle of VUE3 that can be understood in about a few episodes after the show time

Hi everyone, this is Kasong.

Recently, I had no appetite at noon, so I found the VUE source code related video for the current meal drama. After a few meals, people got fat, and VUE also understood.

This article brings you a quick guide to the principles of VUE3

Module division

If we use VUE's template syntax define:

<div>hello</div>

Eventually VUE will help us render the corresponding DOM node in the browser.

The description of this node will undergo 4 changes during this period, spanning compile time and runtime :

template syntax will be converted compiler render function at compile time, similar to:

render(h) {
  return h('div', 'hello');
}

At runtime, the execution result h function returned by the render function is VNode (that is, virtual DOM), similar to:

{
  tag: "div",
  children: [
    {
      text: "Hello"
    }
  ]
}

Finally, VUE according to VNode information in the browser to render the corresponding DOM .

So, who is driving this process?

mount and patch

The component has two different rendering logics: first rendering and update .

first rendering mean from scratch, such as the above VNode :

{
  tag: "div",
  children: [
    {
      text: "Hello"
    }
  ]
}

May correspond to the following DOM operation:

const node = document.createElement(VNode.tag);
node.textConent = 'Hello';
contanerDOM.appendChild(node);

update you need to compare VNode before and after the update, and perform the DOM operation on the changed part.

For example, if the VNode

{
  tag: "div",
  children: [
    {
      // text改变
      text: "world"
    }
  ]
}

Then the final execution:

node.textContent = 'world';

VUE of first renders corresponding to the mount module, and the update corresponds to the patch module.

Therefore, the render function returns VNode after execution. Depending on the situation, the rendering logic of mount or patch

If you want to deepen the virtual DOM, it is recommended to read snabbdom source code. This is an excellent virtual DOM library, VUE2 of virtual DOM part is fork the library transformation.

So who called the render function when?

Responsive update

In VUE , status changes will be reflected in the view in real time, such as:

<div @click="count++">{{count}}</div>

After clicking div :

1. Trigger the click event, count changes
2. count change triggers a callback, and the view is updated during the callback

We already know that the second step is triggered by the following process:

So only need to establish a count change to execution of render function.

Specifically, we hope to achieve reactive and watchEffect :

// 定义状态
const state = reactive({count: 0});

// 监听状态变化
watchEffect(() => {
  console.log(state.count);
})

// 改变状态
state.count++;

reactive defines the state.

watchEffect decides which state to monitor based on the execution of the callback.

For example, if the watchEffect callback executes console.log(state.count); , he will monitor the changes of state

When state.count++; executed, because watchEffect monitors the state , its callback will be triggered and print state.count .

This is the Reactivity module.

VUE officially launched the VUE3 Responsive Principle course to explain Reactivity , which is the B station link. If the economy permits, please support genuine

When the Reactivity module is implemented, we can connect the component state with the subsequent process in series.

As mentioned earlier, the render function is generated by the compiler based on the template syntax When faced with stateful template grammar, such as count above:

<div @click="count++">{{count}}</div>

within render function count is responsive (i.e.: count actually reactive({count: 0}) ).

Then you can use watchEffect monitor the changes of count

Therefore, when the application is initialized, there will be similar logic:

let isMounted = false;
let oldVNode;
watchEffect(() => {
  if (!isMounted) {
    // mount逻辑
    // 调用render函数
    oldVNode = component.render();
    // mount
    mount(oldVNode);
  } else {
    // patch逻辑
    // 调用render函数
    newVNode = component.render();
    patch(oldVNode, newVNode);
    oldVNode = newVNode;
  }
})

Among them, component.render() (execution of the render function) achieves the effect of monitoring state changes

// 监听状态变化
watchEffect(() => {
  console.log(state.count);
})

Therefore, any change in status within the component will trigger watchEffect executed, watchEffect will trigger a subsequent process within the callback.

Summarize

VUE3 can be roughly divided into:

• mount
• patch
• translater
• Reactivity

VUE officially launched implement a simple VUE3 tutorial , interested friends can check it out. If you have the ability, remember to support genuine .

Welcome to join the human high-quality front-end framework group , and grow with everyone