render函数

Posted 2023-03-16

参考技术A       讲render函数前，先讲下为什么有这个东西。先要从Vue在为我们干什么说起：Vue帮助我们做数据和dom的动态绑定。
      浏览器有dom树，而每个Vue实例都会负责把它管辖的数据和它管辖的dom范围动态绑定起来，可以说每一个Vue实例都是一个小中介或者小代理，它会“知道”自己对应到dom树上最终应该是什么内容。
      那么，Vue实例怎么知道它对应到dom树上应该是什么内容呢？我们一般用模板语法写一些标签来定义。
      但有些情况下，用模板语法表达不够简洁（比如官网给了个例子 https://cn.vuejs.org/v2/guide/render-function.html ），你可能会希望有其它方式来定义Vue实例的渲染逻辑。
      所以Vue提供了render函数。

      render函数接收一个createElement参数。通过createElement来创造虚拟节点，VNode（就是说我们用模板语法或者render函数指定了一层层元素，每个元素都还不是真实的dom元素，虽然看起来就像是，我们指定出来的东西叫虚拟节点）。
      所以render函数最主要的就是对createElement方法的运用。

createElement接收3个参数：
1.必填参数，表示虚拟节点的内容。
      值类型：String | Object | Function
      一个 HTML 标签名、组件选项对象，或者resolve 了两者中任何一种的一个 async 函数。
2.选填参数，表示VNode数据对象
3.选填参数，表示子级虚拟节点。值类型String | Array

      什么意思呢？假如对应到平时惯用的模板语法的话，第一个参数就相当于我们用模板语法写标签的标签名；第二个参数就相当于我们给这个标签加的属性（包括原生的html属性也包括自定义的组件属性）、指令等等；第三个参数指定这个“标签”内有没有一些“子元素”。
      第二个参数，也就是VNode数据对象，仔细看里边的内容就会发现自己平时常用的Vue实例属性只是很小的一部分，实际上人家提供的可控制的内容很丰富，嗯我还发现我不知道dom元素property和attribute的区别。。。
      说回createElement方法，当时看完参数解释，天真的我直接就迷惑了，为什么这个createElement方法只告诉我怎么定义元素本身和它的子元素呢？平时开发过程中哪个组件没个五六七八层嵌套啊，我想定义更下层的元素怎么办？？？后来我终于想通了，谁说render函数里的createElement方法只能调一次啊，在第3个参数里定义子级虚拟节点的时候，同样可以再用createElement方法定义子级虚拟节点的子节点。

然后进行一些尝试：
先用vue-cli创建了一个项目。vue-cli一开始写了个HelloWorld组件引入到根组件，我把它换成我自己写的试验组件。

然后上官网示例，把myComp.js改成：

App.Vue也稍作改动：