vue2中的h函数详解

1.h函数

Q：h函数是什么

A：h函数的本质就是 createElement() 的简写，作用是根据配置创建对应的虚拟节点。

在 Vue2版本中，可以使用全局Api render函数，Vue会给这个函数内部传递一个h函数作为参数，用于创建Vnode的描述对象

// 使用模板语法编写的 .Vue 文件最终会被编译成什么样
<template>
  <div class="box">
    <img src="../src/assets/daiban.png" alt="我是一张图片">
    <Son name='卫斯理'/>
  </div>
</template>
<script>
import Son from './son.vue'
 export default {
  name: 'Box',
  components: {
    Son
  }
 }
</script>
<style scoped>
</style>

import Vue, { h } from 'vue'
import router from './router'
import store from './store'
import Son from './son.vue'

import img from '../src/assets/guaz.png'

const App = function render() {
  return h(
    'div',
    {
      id: 'app'
    },
    [
      h('img', {
        alt: '我是一张图片',
        // src: '../src/assets/daiban.png' // 会被识别为字符串
        src: img
      }),
      h(Son, {
        props: {
          name: '卫斯理'
        }
      })
    ]
  )
}

new Vue({ router, store, render: h => h(App) }).$mount('#app')

Q：h函数有那些参数配置

A：type、props、children

export declare function h(
	type: string, 
	props?: RawProps | null, 
	children?: RawChildren | RawSlots
): VNode;

1. type
   1. 类型：String | Object | Function
   2. 描述：HTML 标签名、组件、异步组件或函数式组件 （注意：Vue3 不支持组件名用字符串表示了，必须直接使用组件名）
2. props
   1. Object
   2. 描述：与我们将在模板中使用的 attribute、prop 和事件相对应。可选html元素的 attribute ,如id name class，vue 的 props参数
3. children
   1. 类型：String | Object | Array
   2. 描述：children是子节点 VNode，使用 h() 生成，或者使用字符串来获取"文本 VNode"

	render(h) {
  	// 如果使用原生的则
  	// return h('componentName', {
  	// 这个是挂载组件
  	return h('div', {
  		// 此处是给 SelectEdit 组件传值的（props传值）
 		props: {
	      value: 1,
	      type: 'on'
	    },
	    // class可以数组的形式也可以对象的形式
	    // class: ['speci-class'],
	   	class: {
		  'speci-class': true
		},
		// 样式有-的注意小驼峰 或者使用 string 模式
		style: {
		  color: 'red',
		  fontSize: '14px',
		  // 或者这样
		  'font-size': '14px'
		},
		// 普通的 HTML attribute
		attrs: {
		  placeholder: '这是给原生html赋值placeholder属性'
		},
		// DOM property
		domProps: {
    	  innerHTML: 'DOM property',
    	  // 这个参数等同于h函数的第三个参数
    	  innerText: 'xxxxxxx'
  		},
	    // 这里是挂载方法的但不再支持如 `v-on:keyup.enter` 这样的修饰器
	    on: {
	      // 方法名可以自定义（组件内 $emit('xxxchange', {name: 'zs'})）
	      'xxxchange': val => {
	        this.name = val.name;
	      },
	      'click': val => {
	        this.name = val.name;
	      },
	    },
	    // 仅用于组件，用于监听原生事件，而不是组件内部使用
	    // `vm.$emit` 触发的事件。
	    nativeOn: {
	      click: this.nativeClickHandler
	    },
	    // 自定义指令。注意，你无法对 `binding` 中的 `oldValue`
	    directives: [
	      {
	        name: 'my-custom-directive',
	        value: '2',
	        expression: '1 + 1',
	        arg: 'foo',
	        modifiers: {
	          bar: true
	        }
		  }
		],
		// 作用域插槽的格式为
		scopedSlots: {
	     default: props => createElement('span', props.text)
	    },
	     // 如果组件是其它组件的子组件，需为插槽指定名称
	    slot: 'name-of-slot',
	    // 其它特殊顶层 property
	    key: 'myKey',
	    ref: 'myRef',
	    // 如果你在渲染函数中给多个元素都应用了相同的 ref 名，
  	    // 那么 `$refs.myRef` 会变成一个数组。
	    refInFor: true
	 }, '这里是显示文本')
  }
}

Q：在h函数中如何使用条件判断及循环语句

A：

1. v-for
   1. 在模板中的使用

<ul>
  <li v-for="{ item, index } in list" :key="item.id">
    {{ item }}
  </li>
</ul>

2. 在 h 函数中的使用

let arr = [1,2,3,4,5]
render(h){
  return h(
    'ul',
    {},
    [
      arr.map(item => return(h('li',{},'item'))
    ]
  )
}

2. v-if
   1. 在模板中的使用

let flag = true
<div>
  <div v-if="flag">出现</div>
  <span v-else>隐藏</span>
</div>

2. 在 h 函数中的使用

let flag = true
render(h){
  return h(
    'ul',
    {},
    flag ? '出现' : '隐藏'
  )
}

3. 事件
   1. 在模板中的使用

<Button @click='submit'>提交</Buttom>

2. 在h函数中的使用

render(h){
  return h(
    'ul',
    {
      on：{
        click： () => {
          // 处理函数
        }
      }
    },
    '提交按钮'
  )
}