虚拟节点:
两者的对比:
虚拟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的变化,当它改变的时候,先重新拷贝值,然后过滤出当前的排序列,再根据排序列的排序规则重新排序
效果:可以看到新增的数据根据年龄倒叙插入正确位置。