Shulou(Shulou.com)06/03 Report--

This article mainly introduces the example analysis of AST source code parsing in Vue, which is very detailed and has certain reference value. Friends who are interested must finish it!

Starting with this function:

/ / Line-3924 Vue.prototype._init = function (options) {/ / Mass initialization / /... / / Go! If (vm.$options.el) {vm.$mount (vm.$options.el);}}

After you finish the data binding of the data attribute, start processing the el attribute, that is, the mounted DOM node, where the vm.$options.el is the'# app' string passed in.

It is worth noting that there are two $mount functions in the source code that are prototype functions of Vue$3, one of which is marked with the comment public mount method, on line 7531 and the other on line 9553. The breakpoint goes into the back, because it is defined late, overwriting the previous function.

/ / Line-7531 / / public mount method Vue$3.prototype.$mount = function (el,hydrating) {el = el & & inBrowser? Query (el): undefined; return mountComponent (this, el, hydrating)}; / / Line-9552 var mount = Vue$3.prototype.$mount; Vue$3.prototype.$mount = function (el, hydrating) {/ /. Many codes return mount.call (this, el, hydrating)}

Now go to the following $mount function to look at the internal structure:

/ / Line-9552 var mount = Vue$3.prototype.$mount; Vue$3.prototype.$mount = function (el,hydrating) {/ / format el as DOM node el = el & & query (el); / / determine whether to mount if on body or html tags (el = = document.body | | el = document.documentElement) {"development"! = = 'production' & & warn ("Do not mount Vue to or-mount to normal elements instead.") Return this} var options = this.$options; / / processes the conversion of template/el to render function if (! options.render) {/ /. A lot of code} return mount.call (this, el, hydrating)}

The first half of the code first converts el to a DOM node, and determines whether to mount to the body or html tag. Take a look at the simple query function:

/ / Line-4583 function query (el) {/ / if it is a string, call querySelector if (typeof el = = 'string') {var selected = document.querySelector (el); if (! selected) {"development"! = =' production' & & warn ('Cannot find element:' + el) / / if it is not found, a div return document.createElement ('div')} return selected} / / if it is not a string, the DOM node else {return el}} is passed in by default.

The function is relatively simple, and it is worth noting that since the querySelector method is called, you can pass the signature, class name, C3 new selector, and so on, all of which will return the first query. Of course, always passing an ID or a certain DOM node is the correct usage.

Take a look at the following code:

/ / Line-9552 var mount = Vue$3.prototype.$mount; Vue$3.prototype.$mount = function (el,hydrating) {/ /... el converted to DOM node / /... / / No render attribute enters the code snippet if (! options.render) {var template = options.template / / No template hop if (template) {if (typeof template = 'string') {if (template.charAt (0) =' #') {template = idToTemplate (template); / * istanbul ignore if * / if ("development"! = = 'production' & &! template) {warn (("Template element not found or is empty:" + (options.template)), this) } else if (template.nodeType) {template = template[ XSS _ clean];} else {{warn ('invalid template option:' + template, this);} return this}} / / else if (el) {template = getOuterHTML (el);} if (template) {/ /. Snippet code}} return mount.call (this, el, hydrating)}

Since there is no template attribute, you will directly enter the second judgment condition and call getOuterHTML to initialize the template variable. The function is relatively simple. Let's take a look:

/ / Line-9623 function getOuterHTML (el) {if (el.outerHTML) {return el.outerHTML} / / compatible SVG else {var container = document.createElement ('div'); container.appendChild (el.cloneNode (true)); return container [XSS _ clean]}} in IE

To put it simply, call outerHTML to return the string form of the DOM tree. Just look at the figure:

Let's look at the last piece of code:

/ / Line-9552 var mount = Vue$3.prototype.$mount; Vue$3.prototype.$mount = function (el,hydrating) {/ /... el converted to DOM node / /... / No render attribute enters the code snippet if (! options.render) {/ /. Deal with template / /... If (template) {/ / compilation starts if ("development"! = = 'production' & & config.performance & & mark) {mark (' compile');} / / compiles the DOM tree string into the function var ref = compileToFunctions (template, {shouldDecodeNewlines: shouldDecodeNewlines, delimiters: options.delimiters}, this); / / options adds the attribute var render = ref.render; var staticRenderFns = ref.staticRenderFns Options.render = render; options.staticRenderFns = staticRenderFns; / / compilation ends if ("development"! = = 'production' & & config.performance & & mark) {mark (' compile end'); measure (this._name) + "compile"), 'compile',' compile end');}} return mount.call (this, el, hydrating)}

Ignoring the 2 pieces of prompt code in dev mode, the remaining code does three things, calls the compileToFunctions function to dismember the DOM tree string, adds the returned object properties to the options, and calls the mount function again.

First take a look at the compileToFunctions function, which takes three parameters, namely, the string, the configuration object, and the current vue instance.

Because the function is long and partly misjudged, the simplified function is as follows:

/ / Line-9326 function compileToFunctions (template,options,vm) {/ / get the configuration parameter options = options | | {}; / /. Var key = options.delimiters? String (options.delimiters) + template: template; / / Detection cache if (functionCompileCache [key]) {return functionCompileCache [key]} / / 1 var compiled = compile (template, options); / /... / / 2 var res = {}; var fnGenErrors = []; res.render = makeFunction (compiled.render, fnGenErrors); var l = compiled.staticRenderFns.length; res.staticRenderFns = new Array (l); for (var I = 0; I

Call the compile function to compile = > convert the resulting compiled to the function = > return and cache it.

Let's do this in the first section. A picture summed up:

The above is all the contents of the article "sample Analysis of AST Source Code parsing in Vue". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.