render function of the foundation Vue.js

Blog just turned a bit, only to find himself wrote the first article from the blog Vue binding class vue.js sum style (2016-10-30) has over the past year and two days. This year, the shipyard itself from the ordinary technician, became a common agricultural micro-code start-up companies do not fly. Hair once burned, twice moved home, did not I saved any money. Well, complaints made here, then talk about the legendary close Vue underlying api == render function.

Two sides of a coin

Once upon a time, front-end data and view live together in a powerful jQuery management, they can still get along. But with more complex pages, DOM node tree more and more mixed data in the DOM is becoming increasingly difficult to manage. Thus salvoes ushered MVVM framework data driven view, a data view is divided Milky open, the entire page of data states became clean up. The Magpie Bridge connecting data view is a virtual DOM, DOM see About Virtual comprehensive understanding of virtual DOM, virtual DOM . Each node of the DOM configuration is referred to as the vnode in Vue. (This is not rigorous, bold hypothesis did not verify)

When we generate real DOM structure, you can write an HTML file describing the structure of the document to the browser to resolve, but can also tell by the DOM api innerHTML what browser structure, you can use createElement to build DOM tree to loved the hello world, for example, html and innerHTML api description of the DOM structure are <h1>hello world</h1>, but with createElement becomes like this:

var h1 = document.createElement('h1');
var hw = document.createTextNode('hello world') h1.appendChild(hw); document.body.appendChild(h1);

This is the way to describe the structure of a DOM, you can use a html file, a string or a js code, but they are all doing the same thing, it is to tell the browser how to render the page you want. Now we look back vue, when building vue instance, we want to write a template attribute called, which is the same as a html string. So, vue what to do about this string of? Certainly not shame shame thing. In fact, vue carries it to build a virtual DOM.

Vue.compileThis static method gave us a nice string template is how to become a strange render function:

Vue.compile('<h1>hello world</h1>')

//返回
{staticRenderFns: Array(0), render: ƒ}

render the corresponding property is a function, in the context of an example of Vue calls it will get a string corresponding to a virtual DOM node can paste the code following to the console to see results Vue official website:

let r = Vue.compile('<h1>hello world</h1>');//得到{staticRenderFns: Array(0), render: ƒ}
r.render.call(new Vue({}))

//返回 VNode {tag: "h1", data: undefined, children: Array(1), text: undefined...}

So we unraveling finally see VNode look like, there are tag attributes, as well as children, text ... in short at first glance, really true with the DOM object is somewhat similar, there are real DOM tagName, children, textContent.. .

render function

Above we see the unusual relationship between the function and render the template string and converted by Vue.compile, let's look at the specific configuration render function. Note that, after compiling not get VNode tree, but the generating function VNode.

In the process of creating Vue instance, if the incoming options have template and render two properties, will render a higher priority:

new Vue({
    template:'...',
    render:f(){}//优先级高 })

This means, Vue in to see when you use the render function describes virtual DOM. I will be very happy, because it does not give you his own translation of the string template to get render function, effort and worry. At the same time it will throw you a function that you build a virtual DOM tools needed, the official line given him a name createElement. There convention shorthand called h, vm, there is a method _c, is an alias for this function.

Let us first say what was building a virtual Dom tools, createElement function. Refer to the official website createElement- parameters , first of all think about a normal html elements what information will be passed to us, <h1 class='foo'>hello world</h1>yes, we can get useful information - Part 3:

Tag name of the element --h1
This element has what attributes / events, class, style, onclick, name, id ...
This element has any child elements, here is a text node 'hello world'

Mentioned above, render and function template string is a description of a virtual DOM tree of two ways, then use createElement function to describe becomes the following:

craeteElement('h1', {class,style,on,attrs:{name,id}, 'hello world'}) //这里，第三个参数还有玄机，接收的参数十分灵活，详情参考官网关于这三个参数的描述

See, before we get valid information from a string to a function here becomes the input parameters, and output This is a virtual DOM node. We might as well call them createElement Three Musketeers.

Great swordsman

Parameter type is a string or a function of an object. Like this:

'div'//字符串
{
    data:{},
    methods:{},
    mounted:{} }//一个组件选项对象 function(){return 'div'}//返回上面两种

Two swordsman

A data object, including a description of the root element html properties, and component properties described, as detailed in the official website, let's say you want to describe such a node:

<man class="color" height="1.4m" weight="50kg" v-on:move="handle" />

We need to pass the second parameter should be

{
    'class':{color:true},
    props:{height:'1.4m', weight:'50kg'}， on:{move:function handle(){}} }

The Three Musketeers

Three Musketeers can be a string or an array, the array would indicate that there is more than one virtual root element of the child node. Give you an example:

<h1> <span style="color:red">hello</span> <span>world</span> </h1>

CreateElement give incoming third parameter (second parameter, since no root element attributes may be omitted) should be:

vm = new Vue({
    render:createElement => createElement('h1',[ createElement('span',{style:{color:'red'}},'hello'), createElement('span','world') ]) }); vm.$mount('#logo');//$mount的意思是**附体**

Vue can copy the code to the official website of the console to see results. There is a saying that good, give me a woman, I can create a nation , used here, give me a createElement function, we create a virtual lesson DOM tree . In fact, render function and slot can also wipe out different spark, it is next to introduce the (guilty). Benpian finished.

cnblogs-md-editor editor with Markdown use it to blog