<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>lesson 31</title>
<style>
</style>
<script src="https://cdn.jsdelivr.net/npm/vue@3.4.5/dist/vue.global.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script>
// 一、render function
// 1.[描述]：想通过变量控制文字展示的标签是h1/h2/h3/h4....
// 2.[问题]：如果使用template的话，需要写很多标签，每个标签上都需要增加判断
// 3.[render function]:通过render函数解决这个问题
// 4.[render function写法]：
/** render() {
const {h} = Vue
return h('h'+this.level,{},this.$slots.default())
} **/
// 5.[render function和template的区别]
// 1)template在底层被编译之后会生成render function
// 2)render function中调用vue的h方法const {h} = Vue;返回的内容实际上是vue中的虚拟DOM:(return h('h'+this.level,{},this.$slots.default()))
// 3)this.$slots.default()如果是非具名插槽就使用defalt默认的
// 4)this.$slots.具名插槽的名字()
// 二、虚拟DOM：用js的对象的形式表述这个标签
// 1.vue将template编程render 函数，render函数在返回一个虚拟DOM
// 1）好处：vue 的性能更快；2）让Vue有跨平台的能力
//真实DOM<div>hello</div>
//虚拟DOM
// {
// tagName:'div',
// text:'hello world',
// attributes:{}
// }
// 2.{h}函数是返回一个虚拟DOM节点的一个函数
// 1)h函数的第一个参数定义了虚拟DOM中的tagName
// 2)h函数的第二个参数是个对象，对应的是虚拟DOM中的attributes，代表真实DOM元素上是否有相关属性，如type、name、title等
// 3)h函数的第三个参数对应的是虚拟DOM中的文本，代表真实DOM元素上的文本内容
// 4)h函数的第三个参数可以是数组
// 三、总结
// 1.template--生成-->render function --调用--> {h}h函数 --生成虚拟DOM（JS对象）-->真实DOM--展示到页面上--
const app = Vue.createApp({
data(){
return{
level:1,
}
},
methods: {
handelClick(){
}
},
template:`
<div>
<div>
<my-title :level="5">
hello world
</my-title>
</div>
</div>
`
});
app.component('my-title',{
props:['level'],
render() {
const {h} = Vue;
// return h('h'+this.level,{},this.$slots.default())
return h('h'+this.level,{},[
this.$slots.default(),
h('h2',{},[
'要渲染到页面的内容',
h('h1',{},['可以无限嵌套'])
])
])
},
// template:`
// <h1><slot /></h1>
// <h2><slot /></h2>
// <h3><slot /></h3>
// `
})
const vm = app.mount('#root')
</script>
</html>
