在Vue中，template、render、VNode是什么关系? [英] In Vue, what is the relationship of template, render, VNode?
问题描述
在开发一个vue项目时，对template/render/VNode有一些疑问.
阅读文档后https://vuejs.org/v2/guide/syntax.html，还有google搜索，还是没看懂.
<小时>代码
main.js: (部分)
new Vue({el: '#app',渲染:h =>h(应用程序),路由器})App.vue:
<div id="内容"><!-- <img src="./assets/logo.png" alt="">--><路由器视图></路由器视图></模板><脚本>导出默认{}
<小时>
问题
- 什么是
h来自h =>;h(App)? h返回值的类型是什么?- 模板是否总是编译为
VNode或返回VNode的函数?
什么是
h来自h =>;h(App)
render: h =>h(App) 是以下的简写:
render: function (createElement) {返回 createElement(App);}其中 h 是 createElement 参数的简写；一个将模板编译成 VNode 的函数
https://github.com/vuejs-templates/webpack-simple/issues/29#issuecomment-312902539
<小时><块引用>h 返回值的类型是什么?
由于 h 是 createElement 函数，h 这里返回一个 VNode
https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
<小时><块引用>模板是否总是编译为 VNode 或返回的函数一个 VNode
您可以执行任何一种操作，具体取决于您的实施.如果使用Vue.compile，那么就可以将模板编译成render函数:
var res = Vue.compile('<div><span>{{ msg }}</span></div>')新的 Vue({数据: {msg: '你好'},渲染:res.render，staticRenderFns: res.staticRenderFns})https://vuejs.org/v2/api/#Vue-compile
如果使用 createElement 函数，则直接将模板编译为 VNode.
During development of a vue project, and got some doubt regarding template / render / VNode.
After reading the document https://vuejs.org/v2/guide/syntax.html, and google search, still didn't understand it well.
Code
main.js: (partly)
new Vue({
el: '#app',
render: h => h(App),
router
})
App.vue:
<template>
<div id="content">
<!-- <img src="./assets/logo.png" alt="">-->
<router-view></router-view>
</div>
</template>
<script>
export default {}
</script>
Questions
- What is
hfromh => h(App)? - And what is the type of
h's return value? - Does the template always compile to a
VNodeor a function that returns aVNode?
What is
hfromh => h(App)
render: h => h(App) is shorthand for:
render: function (createElement) {
return createElement(App);
}
where h is shorthand for the createElement argument; a function to compile the template into a VNode
https://github.com/vuejs-templates/webpack-simple/issues/29#issuecomment-312902539
What is the type of
h's return value?
Since h is the createElement function,
h here returns a VNode
https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
Does the template always compile to a VNode or a function that returns a VNode
You can do either, just depending on your implementation. If you use Vue.compile, then you can compile the template into a render function:
var res = Vue.compile('<div><span>{{ msg }}</span></div>')
new Vue({
data: {
msg: 'hello'
},
render: res.render,
staticRenderFns: res.staticRenderFns
})
https://vuejs.org/v2/api/#Vue-compile
If you use the createElement function, then you compile the template directly into a VNode.
这篇关于在Vue中，template、render、VNode是什么关系?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
