木灵鱼儿

木灵鱼儿

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

文章分类 vue3 快速上手
文章标签 renderdiffvue3渲染函数hvNode
木灵鱼儿

木灵鱼儿

发布了 678 篇文章获得点赞 0获得阅读 170

版权申明

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

one
two
three

关于作者

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

相关文章

使用howler.js封装一个网页游戏音乐管理器使用howler.js封装一个网页游戏音乐管理器
实现一个点击空白区域关闭显示的自定义指令实现一个点击空白区域关闭显示的自定义指令
使用vue2.7的一些踩坑事项使用vue2.7的一些踩坑事项
实现一个自动高度的输入框实现一个自动高度的输入框
解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译解决Cocos Creator单屏开发改动脚本文件后还需要切换到Cocos Creator以触发脚本编译