vue3 渲染函数

render

vue2的render他的h函数是本身接的参，vue3则转为es6模块语法，通过import引入，同时也是为了摇树功能。

vue2写法：

export default {
  render(h) {
    return h('div')
  }
}

vue3写法：

import { h } from 'vue'

export default {
  render() {
    return h('div')
  }
}

这个render其实也是作为vue组件的一个配置属性存在的，事实上我们所有的vue组件，最终都会转为render函数，只是我们使用template的写法（SFC），更加方便开发而已。

h函数

h函数也有对应的调整，打平了domProps配置项的层级结构。

vue2的写法：

{
  staticClass: 'button',
  class: {'is-outlined': isOutlined },
  staticStyle: { color: '#34495E' },
  style: { backgroundColor: buttonColor },
  attrs: { id: 'submit' },
  domProps: { innerHTML: '' },
  on: { click: submitForm },
  key: 'submit-button'
}

vue3的写法：

{
  class: ['button', { 'is-outlined': isOutlined }],
  style: [{ color: '#34495E' }, { backgroundColor: buttonColor }],
  id: 'submit',
  innerHTML: '',
  onClick: submitForm,
  key: 'submit-button'
}

具体用法可以查看官方文档：h()

注册的组件

使用h可以vnode处理import引入的vue组件，甚至于，我们可以在vue2的时候，只要这个组件是全局挂载的，就可以通过挂载的组件名称来生成vnode。

vue2：

Vue.component('button-counter', {
  data() {
    return {
      count: 0
    }
  }
  template: `
    <button @click="count++">
      Clicked {{ count }} times.
    </button>
  `
})

export default {
  render(h) {
    return h('button-counter')
  }
}

但是vue3之后，不存在全局组件的逻辑了，因为是在createApp生成的新实例上挂载的组件，所以h函数无法再通过组件名称的方式进行组件的vnode处理。

我们需要通过引入resolveComponent方法：

vue3：

import { h, resolveComponent } from 'vue'

export default {
  setup() {
    const ButtonCounter = resolveComponent('button-counter')
    return () => h(ButtonCounter)
  }
}:

知识补充

vue的渲染逻辑

我们都知道vue使用了虚拟dom，也就是内存中存在一份数据化的dom，也可以称为真实dom的抽象。

当响应式的数据发生变化的时候，生成新的虚拟dom，也就是vnode，此时diff两个虚拟dom，如果数据发生变化，那么就会更新真实的dom节点。

而vnode对象，是非常复杂的，所以我们通过h函数来生成vnode虚拟dom，然后通过render函数将其渲染。

所以我们render常常与h函数绑定使用。

逻辑大概就是这样，可能会有些出入，当你去深入学习vue的渲染原理时，则会有更好的认知。