Vue之Render函数【笔记】-包含【函数化组件】和【使用Render函数开发可排序的表格组件】的实例

虚拟节点：

两者的对比：

 

虚拟dom看起来就像一个标准的javaScript对象，它没有真正的dom结构。它是通过一些特定的方法，比如tag,attributes等来描述清楚一个dom的UI状态。

Vue2里面的vnode：

 主要类型：

 Render的主要方法

 

 

 组件写法：

注意:

如果Vnode作为组件，或者含有组件的slot，那么Vnode必须唯一。

错误示例：

1 ，组件使用两遍，是只能渲染出来一个的，因为组件发生了重复

2，slot包含了组件且重复。

解决的方法:

 在render中，没有的自定义属性，都要通过自己来完成。

 

 包括事件修饰符都可以自己实现

default是默认不具名slot，如果命名了则this.$slots.name

 

函数化组件：

其实使用的场景不多，作为一种解决办法，了解即可。

注：此处应为attrs 

 

 

使用Render函数开发可排序的表格组件：

【此处使用template来写会更简单可读，只做示例render的写法】

定义的样式：

 

 

ya

 父组件引用模板。

 简单定义数据：表头中定义变量来表示该列是否需要排序。

 模板中，定义要用到的表头和表格数据。props是原数据，因为要进行排序，避免原来的数据受到污染，所以定义变量去拷贝传过来的值。

 

 

定义排序类型为默认，定义索引去保存原本的索引顺序。

通过循环构造表格的行列数据。

 循环表头数据，如果设置了可排序，则增加排序的箭头按钮

 写排序的方法。

 当前效果：实现了表格的排序

 

 

增加一个可以新增数据的按钮，要求表格兼容，新增的数据按照当前的排序规则加到表格中去【而不是默认的头或尾】

 

监听data的变化，当它改变的时候，先重新拷贝值，然后过滤出当前的排序列，再根据排序列的排序规则重新排序

效果：可以看到新增的数据根据年龄倒叙插入正确位置。