1、前言
这个构想实际上来源于一个全选的组件;即一开始的目的是做一个全选组件,然后在完成的时候被告知可能有多层级列表的情况;由于项目所用的vux组件库没有tree这个组件;于是干脆想着改造一下尝试实现一个tree结构。
2、实现
2.1、局限和前提
2.1.1,发现无法在子节点里直接修改节点的props传过来的值了
解决方案:
在每一层子节点的data属性里定义一个变量,用于存储深拷贝(props传过来的值)后的值
深拷贝方法用Object.assign
2.1.2,由于无法直接在子节点里直接修改props传过来的值,那么会出现以下情况
1)子节点里的状态发生变更时,得一层一层冒泡到根节点才能去修改当前Tree渲染的数据源里对应的分支节点的数据,因为,对于每一层子节点而言,它的数据源来源于上一节点通过props传过来的数据
2)深拷贝虽然解决了在子节点的作用域下的一些状态无法发生变更(这句话的意思是,比如当前节点有一个属性控制下一分支列表的显隐,那么当该分支列表的结构层的渲染数据直接取得props传过来的data,由于该data不能修改,那么该属性控制显隐的功能就失效了)
但是同时也带来了父节点与子节点的解耦,当父节点的数据源发生变更时,如果不去watch的话,是没办法及时通知子节点发生对应属性的变更的;而vue的生命周期在组件层次只有mounted可以用,而该生命