前端 贾公子
前端 贾公子

vue2&&vue3--render函数(h)

目录

h函数

方法1. 在Options API中的使用

方法2. 在Composition API中的使用 

Vue 2中的渲染函数

​基础​

vue2

vue3

vue3--声明渲染函数 

节点、树以及虚拟 DOM

​虚拟 DOM​

createElement 参数

深入数据对象

约束

vue2

vue3 

使用 JavaScript 代替模板功能

v-if 和 v-for

 vue2

vue 3

v-model 

vue2

vue3

 事件 & 按键修饰符 

vue2

vue3 

 插槽

vue2

vue3

总结

渲染函数参数

2.x 语法

3.x 语法

VNode Prop 格式化

2.x 语法

3.x 语法

注册组件

2.x 语法

3.x 语法

当谈到Vue.js的渐进式框架时，很快会想到它的核心功能之一：渲染函数。渲染函数是Vue.js的一种强大工具，允许您以编程方式创建和控制虚拟DOM。在本文中，我们将探讨Vue 2和Vue 3中的渲染函数的不同之处以及如何使用它们来构建灵活的用户界面。
 

h函数

h函数可以在两个地方使用

  • Options API 的render函数选项中；
  • setup函数选项中（setup本身需要是一个函数类型，函数再返回h函数创建的VNode）

h函数参数：

第一个参数既可以是一个字符串 (用于原生元素) 也可以是一个 Vue 组件定义。第二个参数是要传递的 prop，第三个参数是子节点。

当创建一个组件的 vnode 时，子节点必须以插槽函数进行传递。如果组件只有默认槽，可以使用单个插槽函数进行传递。否则，必须以插槽函数的对象形式来传递。

为了方便阅读，当子节点不是插槽对象时，可以省略 prop 参数。

比有如下一个template结构, 需要使用h函数创建出来

方法1. 在Options API中的使用

import { h } from "vue"

export default {
  render() {
    return h("div", {className: "app"}, [
      h("h2", {className: "title"}, "我是标题"),
      h("p", null, "我是内容"),
    ])
  }
}

vue2&&vue3--render函数(h)_第1张图片
 

  • render函数不仅可以传入普通元素, 也可以传入一个组件
import { h } from "vue"
import Home from "./home.vue"

export default {
  render() {
    return h("div", { className: "app" }, [
      // 因为不是在模板中使用, 因此无需注册, 直接使用
      h(Home)
    ])
  }
}

方法2. 在Composition API中的使用 
  • 如果是在

     vue2&&vue3--render函数(h)_第2张图片

    Vue 2中的渲染函数

    在Vue 2中，渲染函数是一个重要的概念，但相对较复杂。它通常使用JavaScript的createElement函数来创建虚拟DOM节点。下面是一个简单的Vue 2渲染函数示例：

    Vue.component('my-component', {
  render: function (createElement) {
    return createElement('div', 'Hello, Vue 2!')
  }
})

    在这个示例中，我们创建了一个Vue组件，其中的render函数接受一个createElement参数，用于创建一个包含文本内容的

    元素。

    虽然Vue 2的渲染函数非常强大，但它的语法可能会相对复杂，并且不够直观。这使得在开发大型应用程序时，理解和维护渲染函数可能会变得困难。

    ​基础​


     

    Vue 推荐在绝大多数情况下使用模板来创建你的 HTML。然而在一些场景中，你真的需要 JavaScript 的完全编程的能力。这时你可以用渲染函数，它比模板更接近编译器。

    让我们深入一个简单的例子，这个例子里 render 函数很实用。假设我们要生成一些带锚点的标题：


    vue2

    
  
    Hello world!

    对于2上面的 HTML，你决定这样定义组件接口：
     

    Hello world!

    当开始写一个只能通过 level prop 动态生成标题 (heading) 的组件时，你可能很快想到这样实现：
     

    Vue.component('anchored-heading', {
  template: '#anchored-heading-template',
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

    这里用模板并不是最好的选择：不但代码冗长，而且在每一个级别的标题中重复书写了 ，在要插入锚点元素时还要再次重复。

    虽然模板在大多数组件中都非常好用，但是显然在这里它就不合适了。那么，我们来尝试使用 render 函数重写上面的例子：
     

    Vue.component('anchored-heading', {
  render: function (createElement) {
    return createElement(
      'h' + this.level,   // 标签名称
      this.$slots.default // 子节点数组
    )
  },
  props: {
    level: {
      type: Number,
      required: true
    }
  }
})

    看起来简单多了！这样代码精简很多，但是需要非常熟悉 Vue 的实例 property。在这个例子中，你需要知道，向组件中传递不带 v-slot 指令的子节点时，比如 anchored-heading 中的 Hello world!，这些子节点被存储在组件实例中的 $slots.default 中。如果你还不了解，在深入渲染函数之前推荐阅读实例 property API。

    vue3

    Vue 提供了一个 h() 函数用于创建 vnodes：

    import { h } from 'vue'

const vnode = h(
  'div', // type
  { id: 'foo', class: 'bar' }, // props
  [
    /* children */
  ]
)

    h() 是 hyperscript 的简称——意思是“能生成 HTML (超文本标记语言) 的 JavaScript”。这个名字来源于许多虚拟 DOM 实现默认形成的约定。一个更准确的名称应该是 createVnode()，但当你需要多次使用渲染函数时，一个简短的名字会更省力。

    h() 函数的使用方式非常的灵活：

     

    // 除了类型必填以外，其他的参数都是可选的
h('div')
h('div', { id: 'foo' })

// attribute 和 property 都能在 prop 中书写
// Vue 会自动将它们分配到正确的位置
h('div', { class: 'bar', innerHTML: 'hello' })

// 像 `.prop` 和 `.attr` 这样的的属性修饰符
// 可以分别通过 `.` 和 `^` 前缀来添加
h('div', { '.name': 'some-name', '^width': '100' })

// 类与样式可以像在模板中一样
// 用数组或对象的形式书写
h('div', { class: [foo, { bar }], style: { color: 'red' } })

// 事件监听器应以 onXxx 的形式书写
h('div', { onClick: () => {} })

// children 可以是一个字符串
h('div', { id: 'foo' }, 'hello')

// 没有 props 时可以省略不写
h('div', 'hello')
h('div', [h('span', 'hello')])

// children 数组可以同时包含 vnodes 与字符串
h('div', ['hello', h('span', 'hello')])

    得到的 vnode 为如下形式：

    const vnode = h('div', { id: 'foo' }, [])

vnode.type // 'div'
vnode.props // { id: 'foo' }
vnode.children // []
vnode.key // null

     

    注意事项

    完整的 VNode 接口包含其他内部属性，但是强烈建议避免使用这些没有在这里列举出的属性。这样能够避免因内部属性变更而导致的不兼容性问题。

    vue3--声明渲染函数 

    我们可以使用 render 选项来声明渲染函数：

    import { h } from 'vue'

export default {
  data() {
    return {
      msg: 'hello'
    }
  },
  render() {
    return h('div', this.msg)
  }
}

    render() 函数可以访问同一个 this 组件实例。

    除了返回一个单独的 vnode 之外，你还可以返回字符串或是数组：

    export default {
  render() {
    return 'hello world!'
  }
}

     

    import { h } from 'vue'

export default {
  render() {
    // 用数组来返回多个根节点
    return [
      h('div'),
      h('div'),
      h('div')
    ]
  }
}

    如果一个渲染函数组件不需要任何实例状态，为了简洁起见，它们也可以直接被声明为一个函数： 

    function Hello() {
  return 'hello world!'
}

    没错，这就是一个合法的 Vue 组件！参阅函数式组件来了解更多语法细节。 

    节点、树以及虚拟 DOM

    在深入渲染函数之前，了解一些浏览器的工作原理是很重要的。以下面这段 HTML 为例：

     

    
  
    My title
    
  Some text content

    当浏览器读到这些代码时，它会建立一个“DOM 节点”树来保持追踪所有内容，如同你会画一张家谱树来追踪家庭成员的发展一样。
    上述 HTML 对应的 DOM 节点树如下图所示：
    vue2&&vue3--render函数(h)_第3张图片

    每个元素都是一个节点。每段文字也是一个节点。甚至注释也都是节点。一个节点就是页面的一个部分。就像家谱树一样，每个节点都可以有孩子节点 (也就是说每个部分可以包含其它的一些部分)。

    高效地更新所有这些节点会是比较困难的，不过所幸你不必手动完成这个工作。你只需要告诉 Vue 你希望页面上的 HTML 是什么，这可以是在一个模板里：
     

    {{ blogTitle }}

     或者一个渲染函数里：
     

    render: function (createElement) {
  return createElement('h1', this.blogTitle)
}

    在这两种情况下，Vue 都会自动保持页面的更新，即便 blogTitle 发生了改变。

    ​虚拟 DOM​
     

    Vue 通过建立一个虚拟 DOM 来追踪自己要如何改变真实 DOM。请仔细看这行代码：
     

    return createElement('h1', this.blogTitle)

    createElement 到底会返回什么呢？其实不是一个实际的 DOM 元素。它更准确的名字可能是 createNodeDescription，因为它所包含的信息会告诉 Vue 页面上需要渲染什么样的节点，包括及其子节点的描述信息。我们把这样的节点描述为“虚拟节点 (virtual node)”，也常简写它为“VNode”。“虚拟 DOM”是我们对由 Vue 组件树建立起来的整个 VNode 树的称呼。 

    createElement 参数

    接下来你需要熟悉的是如何在 createElement 函数中使用模板中的那些功能。这里是 createElement 接受的参数：
     

    // @returns {VNode}
createElement(
  // {String | Object | Function}
  // 一个 HTML 标签名、组件选项对象，或者
  // resolve 了上述任何一种的一个 async 函数。必填项。
  'div',

  // {Object}
  // 一个与模板中 attribute 对应的数据对象。可选。
  {
    // (详情见下一节)
  },

  // {String | Array}
  // 子级虚拟节点 (VNodes)，由 `createElement()` 构建而成，
  // 也可以使用字符串来生成“文本虚拟节点”。可选。
  [
    '先写一些文字',
    createElement('h1', '一则头条'),
    createElement(MyComponent, {
      props: {
        someProp: 'foobar'
      }
    })
  ]
)

    深入数据对象
     

    有一点要注意：正如 v-bind:class 和 v-bind:style 在模板语法中会被特别对待一样，它们在 VNode 数据对象中也有对应的顶层字段。该对象也允许你绑定普通的 HTML attribute，也允许绑定如 innerHTML 这样的 DOM property (这会覆盖 v-html 指令)。
     

    {
  // 与 `v-bind:class` 的 API 相同，
  // 接受一个字符串、对象或字符串和对象组成的数组
  'class': {
    foo: true,
    bar: false
  },
  // 与 `v-bind:style` 的 API 相同，
  // 接受一个字符串、对象，或对象组成的数组
  style: {
    color: 'red',
    fontSize: '14px'
  },
  // 普通的 HTML attribute
  attrs: {
    id: 'foo'
  },
  // 组件 prop
  props: {
    myProp: 'bar'
  },
  // DOM property
  domProps: {
    innerHTML: 'baz'
  },
  // 事件监听器在 `on` 内，
  // 但不再支持如 `v-on:keyup.enter` 这样的修饰器。
  // 需要在处理函数中手动检查 keyCode。
  on: {
    click: this.clickHandler
  },
  // 仅用于组件，用于监听原生事件，而不是组件内部使用
  // `vm.$emit` 触发的事件。
  nativeOn: {
    click: this.nativeClickHandler
  },
  // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
  // 赋值，因为 Vue 已经自动为你进行了同步。
  directives: [
    {
      name: 'my-custom-directive',
      value: '2',
      expression: '1 + 1',
      arg: 'foo',
      modifiers: {
        bar: true
      }
    }
  ],
  // 作用域插槽的格式为
  // { name: props => VNode | Array }
  scopedSlots: {
    default: props => createElement('span', props.text)
  },
  // 如果组件是其它组件的子组件，需为插槽指定名称
  slot: 'name-of-slot',
  // 其它特殊顶层 property
  key: 'myKey',
  ref: 'myRef',
  // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  // 那么 `$refs.myRef` 会变成一个数组。
  refInFor: true
}

    约束
     

    VNode 必须唯一

    组件树中的所有 VNode 必须是唯一的。这意味着，下面的渲染函数是不合法的：

    vue2

    render: function (createElement) {
  var myParagraphVNode = createElement('p', 'hi')
  return createElement('div', [
    // 错误 - 重复的 VNode
    myParagraphVNode, myParagraphVNode
  ])
}

    如果你真的需要重复很多次的元素/组件，你可以使用工厂函数来实现。例如，下面这渲染函数用完全合法的方式渲染了 20 个相同的段落：
     

    render: function (createElement) {
  return createElement('div',
    Array.apply(null, { length: 20 }).map(function () {
      return createElement('p', 'hi')
    })
  )
}

    vue3 

    组件树中的 vnodes 必须是唯一的。下面是错误示范：

    function render() {
  const p = h('p', 'hi')
  return h('div', [
    // 啊哦，重复的 vnodes 是无效的
    p,
    p
  ])
}

    如果你真的非常想在页面上渲染多个重复的元素或者组件，你可以使用一个工厂函数来做这件事。比如下面的这个渲染函数就可以完美渲染出 20 个相同的段落：

    function render() {
  return h(
    'div',
    Array.from({ length: 20 }).map(() => {
      return h('p', 'hi')
    })
  )
}

     

    使用 JavaScript 代替模板功能

    v-if 和 v-for

     vue2

    只要在原生的 JavaScript 中可以轻松完成的操作，Vue 的渲染函数就不会提供专有的替代方法。比如，在模板中使用的 v-if 和 v-for：

      
  
    • {{ item.name }}
      • 

    

    No items found.

    这些都可以在渲染函数中用 JavaScript 的 if/else 和 map 来重写

    props: ['items'],
render: function (createElement) {
  if (this.items.length) {
    return createElement('ul', this.items.map(function (item) {
      return createElement('li', item.name)
    }))
  } else {
    return createElement('p', 'No items found.')
  }
}

    vue 3

    v-if

    
  
    yes
    
  no

    等价于使用如下渲染函数 

    h('div', [this.ok ? h('div', 'yes') : h('span', 'no')])

    v-for 

      
  
    • 
    {{ text }}
  
      •

    等价于使用如下渲染函数  

    h(
  'ul',
  this.items.map(({ id, text }) => {
    return h('li', { key: id }, text)
  })
)

     

    v-model 

    vue2

    渲染函数中没有与 v-model 的直接对应——你必须自己实现相应的逻辑：

    props: ['value'],
render: function (createElement) {
  var self = this
  return createElement('input', {
    domProps: {
      value: self.value
    },
    on: {
      input: function (event) {
        self.$emit('input', event.target.value)
      }
    }
  })
}

    这就是深入底层的代价，但与 v-model 相比，这可以让你更好地控制交互细节。

    vue3

    v-model 指令扩展为 modelValue 和 onUpdate:modelValue 在模板编译过程中，我们必须自己提供这些 props：

    export default {
  props: ['modelValue'],
  emits: ['update:modelValue'],
  render() {
    return h(SomeComponent, {
      modelValue: this.modelValue,
      'onUpdate:modelValue': (value) => this.$emit('update:modelValue', value)
    })
  }
}

     事件 & 按键修饰符 

    vue2

    对于 .passive、.capture 和 .once 这些事件修饰符，Vue 提供了相应的前缀可以用于 on

    vue2&&vue3--render函数(h)_第4张图片

    on: {
  '!click': this.doThisInCapturingMode,
  '~keyup': this.doThisOnce,
  '~!mouseover': this.doThisOnceInCapturingMode
}

    对于所有其它的修饰符，私有前缀都不是必须的，因为你可以在事件处理函数中使用事件方法：

    vue2&&vue3--render函数(h)_第5张图片

    这里是一个使用所有修饰符的例子： 

    on: {
  keyup: function (event) {
    // 如果触发事件的元素不是事件绑定的元素
    // 则返回
    if (event.target !== event.currentTarget) return
    // 如果按下去的不是 enter 键或者
    // 没有同时按下 shift 键
    // 则返回
    if (!event.shiftKey || event.keyCode !== 13) return
    // 阻止 事件冒泡
    event.stopPropagation()
    // 阻止该元素默认的 keyup 事件
    event.preventDefault()
    // ...
  }
}

    vue3 

    对于 .passive、.capture 和 .once 事件修饰符，可以使用驼峰写法将他们拼接在事件名后面：

    实例：

    h('input', {
  onClickCapture() {
    /* 捕捉模式中的监听器 */
  },
  onKeyupOnce() {
    /* 只触发一次 */
  },
  onMouseoverOnceCapture() {
    /* 单次 + 捕捉 */
  }
})
     {}}
  onKeyupOnce={() => {}}
  onMouseoverOnceCapture={() => {}}
/>

     对于事件和按键修饰符，可以使用 withModifiers 函数：

    import { withModifiers } from 'vue'

h('div', {
  onClick: withModifiers(() => {}, ['self'])
})
     {}, ['self'])} />

     

     插槽

    vue2

    你可以通过 this.$slots 访问静态插槽的内容，每个插槽都是一个 VNode 数组：

    render: function (createElement) {
  // `
    `
  return createElement('div', this.$slots.default)
}

    也可以通过 this.$scopedSlots 访问作用域插槽，每个作用域插槽都是一个返回若干 VNode 的函数：

    props: ['message'],
render: function (createElement) {
  // `
    `
  return createElement('div', [
    this.$scopedSlots.default({
      text: this.message
    })
  ])
}

    如果要用渲染函数向子组件中传递作用域插槽，可以利用 VNode 数据对象中的 scopedSlots 字段：

    render: function (createElement) {
  // `
    {{ props.text }}
    `
  return createElement('div', [
    createElement('child', {
      // 在数据对象中传递 `scopedSlots`
      // 格式为 { name: props => VNode | Array }
      scopedSlots: {
        default: function (props) {
          return createElement('span', props.text)
        }
      }
    })
  ])
}

    vue3

    在渲染函数中，可以通过 this.$slots 来访问插槽：

    export default {
  props: ['message'],
  render() {
    return [
      // 
    
      h('div', this.$slots.default()),

      // 
    
      h(
        'div',
        this.$slots.footer({
          text: this.message
        })
      )
    ]
  }
}

    传递插槽

    向组件传递子元素的方式与向元素传递子元素的方式有些许不同。我们需要传递一个插槽函数或者是一个包含插槽函数的对象而非是数组，插槽函数的返回值同一个正常的渲染函数的返回值一样——并且在子组件中被访问时总是会被转化为一个 vnodes 数组。

    h(MyComponent, () => 'hello')

// 具名插槽
// 注意 `null` 是必需的
// 以避免 slot 对象被当成 prop 处理
h(MyComponent, null, {
    default: () => 'default slot',
    foo: () => h('div', 'foo'),
    bar: () => [h('span', 'one'), h('span', 'two')]
})

    插槽以函数的形式传递使得它们可以被子组件懒调用。这能确保它被注册为子组件的依赖关系，而不是父组件。这使得更新更加准确及有效。

    总结

    此更改不会影响