render函数/h函数

使用render函数创建Vnode节点

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

h函数可替代createElement

使用模板语法时候遇到的问题

//使用模板语法时候遇到的问题
<script type="text/x-template" id="anchored-heading-template">  
<h1 v-if="level === 1">  
<slot></slot>  
</h1>  
<h2 v-else-if="level === 2">  
<slot></slot>  
</h2>  
<h3 v-else-if="level === 3">  
<slot></slot>  
</h3>  
<h4 v-else-if="level === 4">  
<slot></slot>  
</h4>  
<h5 v-else-if="level === 5">  
<slot></slot>  
</h5>  
<h6 v-else-if="level === 6">  
<slot></slot>  
</h6>  
</script>

我们可以创建一个更复杂的嵌套DOM结构，例如一个嵌套列表。以下是一个示例：

	// 定义一个组件  
	Vue.component('my-component', {  
	  data: function() {  
	    return {  
	      items: [  
	        { id: 1, name: 'Item 1' },  
	        { id: 2, name: 'Item 2' },  
	        { id: 3, name: 'Item 3' }  
	      ]  
	    }  
	  },  
	  render: function (h) {  
	    // 创建ul节点  
	    const ul = h('ul', {}, this.items.map(item => {  
	      // 创建li节点  
	      const li = h('li', {  
	        attrs: {  
	          key: item.id // 必须提供唯一的key属性  
	        }  
	      }, item.name)  
	      // 返回li节点作为子节点  
	      return li  
	    }))  
	    return ul  
	  }  
	})

在上面的示例中，我们定义了一个名为my-component的组件，它接受一个items数组作为数据源。在render函数中，我们使用h函数创建了一个ul节点，并通过map方法遍历items数组，为每个项目创建一个li节点。我们将每个li节点作为子节点添加到ul节点中。最后，我们返回ul节点作为渲染结果。这样，我们就创建了一个嵌套的列表DOM结构。

请注意，在创建虚拟节点时，必须为每个节点提供一个唯一的key属性。这是Vue的优化机制，用于跟踪每个节点的身份，以便在更新时能够准确地识别和替换相应的节点。