rander函数

1.render函数

  • render函数 和 template 一样都是创建html模板, 有时候template不够灵活,就需要render函数了;
  • 函数式组件,他的内部不是响应式的了, 组件无状态(没有data)和无实例(没有 this 上下文); 他们用一个简单的render函数返回
    虚拟及诶单使它们渲染的代价更小

1.1 render 函数的返回值(VNode)

Vnode (即: 虚拟节点), 也就是渲染的节点

1.2 render函数的参数(createElement) 也叫 h

createElement 是 render函数的参数, 它本身也是一个函数, 并且有三个参数

  • 1.【必填】一个HTML 标签字符串, 组件选项对象,或者 resolve 了上述任何一种的一个 async 函数。
  • 2.【可选】一个与模板中 attribute 对应的数据对象。 类型:
  • 3.【可选】子级虚拟节点 (VNodes) 类型:
// 等价于
<h3 class="abc">
  <h4 class="abc2">我是h5</h4>
</h3>

<script>
export default {
  name: 'demo',
  render : (h,context) => {// 提供第二个参数作为上下文
    return h('h3', { class: 'abc' }, [h('h4', { class: 'abc2' }, '我是h4')])
  },
  methods:{

  }
}
</script>

2.Vue3 h()函数

将 h 作为 createElement 的别名是 Vue 生态系统中的一个通用惯例,实际上也是 JSX 所要求的。
h() 函数是一个用于创建 VNode 的实用程序。也许可以更准确地将其命名为 createVNode(),但由于频繁使用和简洁,它被称为 h()

3.官方解释

image

posted @ 2022-07-25 16:31  飞鸟和蝉-  阅读(305)  评论(0编辑  收藏  举报