V-text, v-html, V-cloak, v-pre.md

In this article, we briefly describe the implementation of several Vue built-in directives .

v-text

v-textis simple to use, the following two expressions have the same effect.

<v-text="msg" ></span><span>{{msg}}</span>  

As with all common directives, it ast v-text is parsed into when it is generated el.directives .

In the process of generating render a function, however, when the property is parsed,

We will parse the instructions first. genDirectivesThe following code is in the method:

 const gen: directivefunction = Platformdirectives[dir.name] | | baseDirectives[dir.name]if (gen) {/ /compile-time directive that manipulates AST. //returns True if it also needs a runtime counterpart. Needruntime = !! gen (el, dir, warn)} if (needruntime) {hasruntime = true Res +=  ...               

As we mentioned in the Directives overview, platformDirectives baseDirectives Some of the built-in instructions are processed. v-textis one of them.

The final gen function is as follows:

Text (eldirif (dir.' textcontent' _s (${dir.value})}} 

The function returns undefined , so eventually it needRuntime is false , so the result is not added to the res top.

addPropis defined as follows:

Addprop (elnamevaluestring) {(el.| | (el.= [])). push ({name, value})}

It will el.props add an object to the array, and the objects are name saved value .

DOM propsif (elprops) {  ' domprops:{${genprops (el.props) }},`}

Eventually, it is added to domProps the corresponding array. In the example above span , the resulting render function is as follows:

_c (' span', {domprops: {"textcontent":_s (msg)}})

Processing in the patch process, data as in other data, is handled by the hook function.

functionUpdatedomprops (Oldvnode:Vnodewithdata,Vnode:Vnodewithdata) {if (!Oldvnode.Data.Domprops&&!Vnode.Data.Domprops) {return}Let key, curConst ELM:Any=Vnode.ElmConstOldprops=Oldvnode.Data.Domprops|| {}Let props=Vnode.Data.Domprops|| {}Clone observed objects, as the user probably wants to mutate itif (Props.__ob__) {Props=Vnode.Data.Domprops=Extend ({}, props)}For (keyIn Oldprops) {if (Props[key]==NULL) {Elm[key]=‘‘ } }For (keyIn props) {cur= Props[key]if (key===' Textcontent‘|| Key===' InnerHTML‘) {if (Vnode.Children)Vnode.Children.Length=0if (cur= = = Oldprops[key])Continue}if (key===' Value‘) {//store value as _value as well since //non-string values would Be stringified elm. _value = cur //avoid resetting cursor position when value is th E same const strcur = cur == null  '  : String ( cur) if (shouldupdatevalue (Elm, Vnode, Strcur)) {elm.< Span class= "PL-C1" >value = Strcur}} else {Elm[key] = cur}}}< br> 
                

oldProps props properties that do not exist on the top are reset first. It then iterates through the props properties, if the key value textContent or innerHTML , clears children the contents.

If key === ‘value‘ this should be input done, the select special handling of labels. Otherwise, set directly to elm.textContent = cur change the text content.

v-html

v-htmland v-text the usage and processing process is basically exactly the same, the only difference is the final v-html set elm.innerHTML = cur .

The usage examples are as follows:

<v-html="msg" ></span>   

v-cloak

This command is used less, people who do not understand the official documentation may be a little bit of a blur. It is ast generated in the same way as the ordinary instructions above, and in the genDirectives time, it baseDirectives cloak is included, but the final return gen is an empty function. Eventually it is not added to the directives array, and then there is no processing of it.

As our template is recompiled, the label will be displayed on the page Mustache . The directive is deleted after the template has been compiled. We can add to [v-cloak] { display: none } prevent the user from perceiving that the Mustache label appears.

v-pre

v-preIndicates that the compilation of the label and its child elements will be skipped.

In the callback function when compiling the template start , there is the following fragment:

if (!invpre) {  processpre (Element)  if (element).  ... }

processPreThe function gets the element v-pre properties on, if any, set element.pre = true , and set inVPre = true .

The next process will go into the processRawAttrs function. The else processing of various instructions, attributes, etc. within a block will not be performed.

functionProcessrawattrs (EL) {ConstL=El.Attrslist.Lengthif (l) {ConstAttrs=El.Attrs=Newarray (L) for (let i = 0; I < l; i++) {attrs[i] = {Nameel.attrslist[i]. Name, Value: json. Stringify (el.attrslist[i]. Value)}}} else if (! El.pre) {//non root node in the pre blocks with no attributes 
                                            
                                             el.
                                             plain = true}}   
                                             

Here is the processing of the property, if el.attrsList not an empty array, the el.attrsList properties on the direct loop are added to the el.attrs top. Otherwise, set if the current element does not have v-pre an instruction set (the v-pre child element of the set element) el.plain = true .

Because we don't compile the entire subtree, not the individual elements. Vueis through inVPre to mark, our parse entire process is into the stack, when the child elements are compiled, will go to the current element of end processing, and then set up inVPre = false , to end the content is not compiled.

V-text, v-html, V-cloak, v-pre.md