Before the virtual dom, we also have a basic understanding.
In short, we use the js data structure to describe the dom structure tree of html
First of all, why use virtual dom?
The official answer is that the diff minimum refinement algorithm occurs on the virtual dom, that is, the node-to-node comparison
we said before does not occur on the html element but on the virtual dom in js.
When the node changes or the node-dependent data changes, compare what is different to know how to update. The least disturbing place can also complete the purpose of updating. This comparison
process is called diff algorithm, and this process is carried out on these virtual DOM nodes in the js part. of
Then we have to think about how dom becomes virtual dom now?
But this knowledge belongs to the category of template compilation principles. I won’t explain it here because of time issues.
We need to know what the virtual dom is rendered through, then the prompt is rendered through the h function
h doesn’t mean much. It’s the author’s name for a function when writing code, so if we want to open source or technology stack naming conventions in the future, it’s still very important. Later, when others refer to your code, they will also reversely deduce your function. name
The role of the h function is to generate virtual nodes.
For example, we call the h function like this
h('a',{
props: {
href: 'https://blog.csdn.net/weixin_45966674?type=blog'}}，'测试标签')
Then this function will help us create a virtual node like this
{
'sel': 'a'
"data": {
props: {
href:'https://blog.csdn.net/weixin_45966674?type=blog'
}
},
"text": '测试标签'
}
see him as such
<a href= "https://blog.csdn.net/weixin_45966674?type=blog">测试标签</a>
Then let's take a look at it, that is to say, the first parameter of the h tag is what tag you want to create, a string
type
such as "div", "p", "h1", etc.
The second parameter is an object.
Here, we first have an object outside {}
Then there must first be a field props,
which represents the attribute. Sometimes a json object corresponding to the key value is the label attribute.
For example
{
props: {
href: "链接",
name: "name值"
}
}
The third needless to say is the content in the label
Then we declare a virtual dom node in this way,
also called vnode
, where v corresponds to the word virtual, which means that the virtual
node is the node virtual node
First of all, h is to declare a virtual dom node. As for how to transfer the dom node to h to become a virtual dom node, this involves template compilation principles and time issues. dom play understand
The virtual node mainly has the following attributes:
children is its child node, and the sub-element is undefined, indicating that there is no subset
data. It is the label attribute elm we just saw on him, which
corresponds to the real dom node of this element. If it is undefined, it means this node The dom tree key has not been uploaded yet,
which means the unique identifier of the node. Especially when we loop rendering elements in vue development, we need to add a key attribute to the tag to distinguish
sel. What tag is used is the first parameter of our h" Tag name such as div”
text means text
Okay, let’s not just talk about it,
let’s open the case created above,
find the index.js under src,
and kill all the codes outside the package
, and then change the index.js code under src to this
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog"
}},
"测试虚拟dom");
console.log(vonm);
Here we need to know that the h function is not so strong, it will not really add a node on the dom tree of html, it just creates a virtual dom node in js, the
h function is not so powerful, then we start the project
and open the console, we use the console The virtual node generated by the h generated by the .log output is here.
Let’s take a brief look at a few of its attributes
, but it feels a bit boring to look at it like a json.
Let’s let him go to the DOM tree of the page.
At this time we need to create a patch function
I will update the article later. I will talk about the patch function more quickly. It is a core function of the diff algorithm. It is
very useful
. This article will not talk about it in the follow-up article.
We modify the index.js code under src as follows
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建patch函数
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule
]);
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog"
}},
"测试虚拟dom");
console.log(vonm);
//让虚拟节点上树
const container = document.getElementById('container');
patch(container,vonm);
Here, use init to pass an array, which is all other dependencies that come out with a patch. I will publish a specific patch later to talk about this. Let’s first understand h and virtual nodes. Then we need to get a node and get the id
through
document.getElementById The node is the container
, and the first parameter is the node to be mounted, and the second parameter is the virtual dom node.
Run the project again, and our virtual node will go up and become a real node.
After clicking our hyperlink, we can really see it. Jump,
our label attributes are all effective naturally
, but every time we click, it opens in the current interface
After learning html, everyone knows how to solve it.
We changed the index.js under src to this
import {
init,
classModule,
propsModule,
styleModule,
eventListenersModule,
h,
} from "snabbdom";
//创建patch函数
const patch = init([
classModule,
propsModule,
styleModule,
eventListenersModule
]);
//创建虚拟节点
var vonm = h("a",{
props: {
href: "https://blog.csdn.net/weixin_45966674?type=blog",
target: "_blank"
}},
"测试虚拟dom");
console.log(vonm);
//让虚拟节点上树
const container = document.getElementById('container');
patch(container,vonm);
Add an attribute target on props: "_blank"
so that it will be opened in another interface
What you need to know here is that we can only let one virtual dom be on the tree for one node, but you can embed it in
our follow-up article
, so I will slip away and promise everyone that it will be updated after a period of time.