Skip to content

Commit 38a7a6f

Browse files
committed
update render function guide with compilation and unique vnodes info
1 parent ee8c266 commit 38a7a6f

File tree

2 files changed

+115
-0
lines changed

2 files changed

+115
-0
lines changed

src/guide/render-function.md

Lines changed: 107 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -209,6 +209,35 @@ Vue.component('anchored-heading', {
209209
})
210210
```
211211

212+
### Constraints
213+
214+
#### VNodes Must Be Unique
215+
216+
All VNodes in the component tree must be unique. That means the following render function is invalid:
217+
218+
``` js
219+
render: function (createElement) {
220+
var myParagraphVNode = createElement('p', 'hi')
221+
return createElement('div', [
222+
// Yikes - duplicate VNodes!
223+
myParagraphVNode, myParagraphVNode
224+
])
225+
}
226+
```
227+
228+
If you really want to duplicate the same element/component many times, you can do so with a factory function. For example, the following render function is a perfectly valid way of rendering 20 identical paragraphs:
229+
230+
``` js
231+
render: function (createElement) {
232+
var myParagraph =
233+
return createElement('div',
234+
Array.apply(null, { length: 20 }).map(function () {
235+
return createElement('p', 'hi')
236+
})
237+
)
238+
}
239+
```
240+
212241
## Replacing Template Features with Plain JavaScript
213242

214243
Wherever something can be easily accomplished in plain JavaScript, Vue render functions do not provide a propriety alternative. For example, in a template using `v-if` and `v-for`:
@@ -381,6 +410,82 @@ You may wonder why we need both `slots` and `children`. Wouldn't `slots().defaul
381410

382411
For this component, `children()` will give you both paragraphs, `slots().default` will give you only the second, and `slots().foo` will give you only the first. Having both `children` and `slots` therefore allows you to choose whether this component knows about a slot system or perhaps delegates that responsibility to another component by simply passing along `children`.
383412

413+
## Template Compilation
414+
415+
You may be interested to know that Vue's templates actually compile to render functions. This is an implementation detail you usually don't need to know about, but if you'd like to see how specific template features are compiled, you may find it interesting. Below is a little demo using `Vue.compile` to live-compile a template string:
416+
417+
{% raw %}
418+
<div id="vue-compile-demo" class="demo">
419+
<textarea v-model="templateText" rows="10"></textarea>
420+
<div v-if="typeof result === 'object'">
421+
<label>render:</label>
422+
<pre><code>{{ result.render }}</code></pre>
423+
<label>staticRenderFns:</label>
424+
<pre v-for="(fn, index) in result.staticRenderFns"><code>_m({{ index }}): {{ fn }}</code></pre>
425+
</div>
426+
<div v-else>
427+
<label>Compilation Error:</label>
428+
<pre><code>{{ result }}</code></pre>
429+
</div>
430+
</div>
431+
<script>
432+
new Vue({
433+
el: '#vue-compile-demo',
434+
data: {
435+
templateText: '\
436+
<div>\n\
437+
<h1>I\'m a template!</h1>\n\
438+
<p v-if="message">\n\
439+
{{ message }}\n\
440+
</p>\n\
441+
<p v-else>\n\
442+
No message.\n\
443+
</p>\n\
444+
</div>\
445+
',
446+
},
447+
computed: {
448+
result: function () {
449+
if (!this.templateText) {
450+
return 'Enter a valid template above'
451+
}
452+
try {
453+
var result = Vue.compile(this.templateText.replace(/\s{2,}/g, ''))
454+
return {
455+
render: this.formatFunction(result.render),
456+
staticRenderFns: result.staticRenderFns.map(this.formatFunction)
457+
}
458+
} catch (error) {
459+
return error.message
460+
}
461+
}
462+
},
463+
methods: {
464+
formatFunction: function (fn) {
465+
return fn.toString().replace(/(\{\n)(\S)/, '$1 $2')
466+
}
467+
}
468+
})
469+
console.error = function (error) {
470+
throw new Error(error)
471+
}
472+
</script>
473+
<style>
474+
#vue-compile-demo pre {
475+
padding: 10px;
476+
overflow-x: auto;
477+
}
478+
#vue-compile-demo code {
479+
white-space: pre;
480+
padding: 0
481+
}
482+
#vue-compile-demo textarea {
483+
width: 100%;
484+
485+
}
486+
</style>
487+
{% endraw %}
488+
384489
## Misc
385490

386491
### `keep-alive`
@@ -400,3 +505,5 @@ createElement('keep-alive', {
400505
}
401506
})
402507
```
508+
509+

src/guide/ssr.md

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
title: Server-Side Rendering
3+
type: guide
4+
order: 25
5+
---
6+
7+
## Introduction
8+

0 commit comments

Comments
 (0)