Vue 中的render(h)
在vue架构中main.js往往为程序的入口文件,其中render()函数将h(app)中传入的内容渲染成虚拟节点(Vnode),是补充通过模板template创建HTML的一种方法,事实上,template中内容也会被编译成Vnode,因此render函数比模板更接近编辑器。
下面展示一些 main.js常见内容。
new Vue({
router,
store,
// render函数的作用就是将App那个vue组件渲染成DOM节点。
// render函数里面的形参,可以做到这一点,所以 h这个函数 , 里面传进去一个App组件。
render: h => h(App)
}).$mount('#app')
render: h => h(App) 解释
今天刚学vue,看到代码中 render: h => h(App) 看不懂了下面记录下
首先需要了解这是 es 6 的语法, 表示 Vue 实例选项对象的 render 方法作为一个函数, 接受传入的参数 h函数,返回 h(App) 的函数调用结果。
render: h => h(App) 是下面内容的缩写:
render: function (createElement) {
return createElement(App);
}
进一步缩写为(ES6 语法):
render(createElement){
return createElement(App);
}
再进一步缩写为:
render(h){
return h(App);
}*/
其中h()接受三个参数,返回vNode节点
// @returns {VNode}
h(
// {String | Object | Function} tag
// 一个 HTML 标签名、一个组件、一个异步组件、或
// 一个函数式组件。
//
// 必需的。
'div',
// {Object} props
// 与 attribute、prop 和事件相对应的对象。
// 我们会在模板中使用。
//
// 可选的。
{},
// {String | Array | Object} children
// 子 VNodes, 使用 `h()` 构建,
// 或使用字符串获取 "文本 Vnode" 或者
// 有插槽的对象。
//
// 可选的。
[
'Some text comes first.',
h('h1', 'A headline'),
h(MyComponent, {
someProp: 'foobar'
})
]
)
createElement 函数是用来生成 HTML DOM 元素的,也就是上文中的 generate HTML structures,也就是 Hyperscript。h函数是hyperscript 的缩写,它的作用就是生成一个Vnode节点,可以认为它是createElement一种简单的缩写表示,这样作者才把 createElement 简写成 h。