You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
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
+
returncreateElement('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:
## Replacing Template Features with Plain JavaScript
213
242
214
243
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
381
410
382
411
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`.
383
412
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:
0 commit comments