木灵鱼儿

木灵鱼儿

阅读:170

最后更新:2022/08/18/ 23:13:56

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的渲染原理时,则会有更好的认知。

版权申明

本文系作者 @木灵鱼儿 原创发布在木灵鱼儿 - 有梦就能远航站点。未经许可,禁止转载。

关于作者

站点职位 博主
获得点赞 0
文章被阅读 170

相关文章