本文介绍了在Vue中,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
的函数?
解决方案
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
h
from h => h(App)
? - And what is the type of
h
's return value? - Does the template always compile to a
VNode
or a function that returns a VNode
?
解决方案
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
Since h
is the createElement
function,h
here returns a VNode
https://vuejs.org/v2/guide/render-function.html#createElement-Arguments
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是什么关系?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!