vue render函数和h()函数

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。

参考链接:vue render函数和h()函数_vue render h_佑眼睛的博客-CSDN博客

参考链接:vue 初探之 h => h(App) 详解_逝水飞鱼的博客-CSDN博客

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Vuerender 函数Vue.js 中一个非常重要的概念。它是用来描述组件如何渲染的函数。在 Vue 中,我们可以使用模板语法来编写组件的渲染逻辑,也可以使用 render 函数来编写。 使用 render 函数,你可以直接返回一个虚拟 DOM 对象,描述组件的结构和行为。这个函数接收一个参数,通常命名为 h(代表 createElement),它是一个用于创建 VNode(虚拟节点)的函数。 在 render 函数中,你可以通过调用 h 函数来创建 VNode,然后返回一个或多个 VNode 组成的树形结构。VNode 是对真实 DOM 的一种抽象表示,它包含了节点的标签名、属性、子节点等信息。 以下是一个简单的例子,演示了如何使用 render 函数创建一个简单的 Vue 组件: ```javascript // 定义一个组件 const MyComponent = { render(h) { return h('div', { class: 'container' }, [ h('h1', {}, 'Hello, Vue!'), h('p', {}, 'This is a Vue component.') ]) } } // 使用组件 new Vue({ el: '#app', render: h => h(MyComponent) }) ``` 这个例子中,我们定义了一个名为 MyComponent 的组件,在 render 函数中返回了一个包含 h1 和 p 标签的 div 元素。在 new Vue 的时候,我们将 render 函数指定为 MyComponent,从而将组件渲染到具有 id 为 app 的元素中。 通过使用 render 函数,你可以更灵活地控制组件的渲染逻辑,实现更高级的功能。它提供了一种编程式的方式来构建组件,而不仅仅局限于模板语法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值