start

During this period of time, I have been reading the source code of Vue 2.6. It is amazing that there are so many exquisite designs and writing methods. Although the mind map has been drawn a lot, the whole process and the key logic has passed, but in line with the principle of learning from paper to light, decided to do a simple version of Vue.

Demand analysis

Vue has several important components – > Observe, complier, Dep, Watcher, Patch. I’ll look at the principles and my own implementation one by one.

Data response section

This section believes that until the Vue principle is clear, the core is javascript language features API Object,definePrototype, even if you have not used this API, it must be until it is the key to Vue implementation of responsiveness, However, it is an entrance to Vue’s responsive system, through which Vue implements dependency collection and view update, mainly involved in the following parts: Observe,Dep,Watcher. Here is the conceptual code implementation:

function Observer(obj) { const keys = Object.keys(obj) keys.forEach( item => { const dep = new Dep() let value = obj[item] Object.definePrototype( obj, item, { get() { if( Dep.target ) { dep.add(Dep.target) } return value }, set(val) { if( val ! == value ) { value = val dep.nodify() } } } ) } ) }Copy the code

This code is basically the entire code for the corresponding data dependency collection and triggering updates. If you’re interested in the details, or want to know what dep.targrt is, you can click here for more details on the implementation of watcher.js and dep.js. Remember a Star if you enjoy it.

Complier part

This part is the most logically complex part of Vue source code. It compiles the template defined normally into the render function, that is, it only compiles the template once during instance initialization, and then only needs to make patch according to the data and render result. Vue Complier came from another simple HTML parser, which was expanded and modified by the Udc compiler to become Vue Complier. Here I am directly using this simple version of the template resolution, the specific implementation code here.

123

is tied here, but it needs to make an organic combination of the results of each parsed node to form a Vnode for patch to use. The following is the specific code for configuring the compiler: 

Const handler = {startElement: function (sTagName, oAttrs) {// Start tag if (tag.length === 0) {currentNode = {tag: sTagName, attr: parseProps(oAttrs), children: [] } arr.push(currentNode) } else { const parentNode = arr[arr.length - 1] currentNode = { tag: sTagName, attr: parseProps(oAttrs), children: []} parentNode.children.push(currentNode)} tag.push(sTagName) // console.log("startElement", sTagName, oAttrs); }, endElement: function (sTagName) {tag.pop(); // console.log("endElement", sTagName); }, characters: Function (s) {/ / says is to obtain characters (currentNode && currentNode. Children) && currentNode) children. Push (s) / / console.log("characters", s); {}, the comment: the function (s) / / said get comments currentNode. Children. Push ({tag: "comment", the text: s }) // console.log("comment", s); }};Copy the code

{
	name: "v-model",
    value: "sss"
}
Copy the code

So, you need to do a bit more of your own work by converting the execution to tag attributes, such as v-Model to value attributes and input events. This part of the content I did in the render function generation, the specific code is here. The processing idea is consistent with the above description.

Patch part

This part directly uses snabbdom.js, which is the basic version of Vue Patch. If you are interested, you can go to the official website for research.

Data is linked to Patch

This section is the core of Vue. As we know, Vue generates only one render function per instance, which facilitates batch updates and reduces the number of updates (and, of course, asynchronous scheduling, code here). The specific render function generation logic is shown here. Here is a recursively generated string imitating the official generated by Vue, such as using with to delimit scope, using different functions to generate different nodes and so on. This part needs further study, because my algorithm still has defects. (Sorry about the busy schedule.)

subsequent

This article is just the beginning, and a deeper analysis of the source code and logical combination for each part will follow:

  • Diff’s core algorithm
  • Vue initialization process
  • The flow of instance updates
  • Component initialization, mounting, rendering process analysis

conclusion

The complete code for the project is here, and there are other things you can learn from it. If you need it, you can check it by yourself. Don’t forget to give a little encouragement to Star. Thank you.