The first step

Start by encapsulating some DOM operations

Element operations:

Text manipulation:

The second step

Ts, class.ts, event.ts, and style.ts

In the class. In the ts

If you pass the value as null, THEN I’ll just delete the previous one, otherwise I’ll just overwrite the previous one

In the style of ts

  • First check if there is a new one, then delete the entire style
  • Otherwise, we will check whether the old attribute exists. If so, we will loop through the old attribute and check whether the old attribute is in the new one. If not, this attribute has been deleted, then we will directly assign the value of this attribute to null
  • Then assign all the new attributes to the style
  • Summary: The purpose is to update the operation, the new does not exist all delete, the new exists, delete the old attributes, the new does not exist, and then assign all attributes in the new directly to the style

Attr. In ts

Delete if there is none, update if there is new value

Events. In ts

  • Caches functions first. Vue events are cached in _vei. If not, construct one
  • If the current event function exists in the cache, replace the value in it, i.e. replace the function
  • If the current event function does not exist in the cache, intercept the on and convert the rest to lower case
  • Then I will determine whether value exists. If it does, I therefore pay and therefore I am bound. Therefore, I therefore create an Invoker, which is cached in _vei, and I therefore create an event
  • If value does not exist, it was previously bound, and exists exists, then the event is cleared from _vei

Outermost in Patchprop.ts

The third step

Integrate the above methods in index to provide methods at render time

The extend is the Object. The assign

Now that the run-time dom’s responsibilities are complete, you need to use the core methods provided by Run-time Core to handle rendering

Note: The reason for rewriting mount is that · I want to have operations to empty the container

The fourth step

The runtime – in the core

The createRenderer method is provided to create a renderer

The renderer. In ts

Let’s now pull createApp out and pull it out to ApicReateApp.ts

ApiCreateApp. In ts

Things to do in mount:

  • Create virtual nodes based on components
  • The Render method is called after the virtual nodes and containers are retrieved

Creating a Virtual Node

First, save the properties of the component, the component itself, and the corresponding application container

createVNode

Calls to render

Our next step is to write the createVNode method to create the virtual node

If you feel that you have gained something, please use your little hands to save, thank you! How to predict the future, and listen to the next time to break down ~