[{"data":1,"prerenderedAt":485},["ShallowReactive",2],{"navigation_docs":3,"-guide-behavior":102,"-guide-behavior-surround":480},[4,82,87,92,97],{"title":5,"icon":6,"path":7,"stem":8,"children":9},"指南","i-lucide-list-tree","\u002Fguide","1.guide",[10,14,19,24,29,34,39,44,48,53,58,63,68,73,77],{"title":11,"path":7,"stem":12,"icon":13},"指南总览","1.guide\u002Findex","i-lucide-map",{"title":15,"path":16,"stem":17,"icon":18},"快速开始","\u002Fguide\u002Fquick-start","1.guide\u002F1.quick-start","i-lucide-rocket",{"title":20,"path":21,"stem":22,"icon":23},"键盘导航与可访问性","\u002Fguide\u002Fkeyboard","1.guide\u002F10.keyboard","i-lucide-keyboard",{"title":25,"path":26,"stem":27,"icon":28},"类型化 createTypedOkrTree","\u002Fguide\u002Ftyped","1.guide\u002F11.typed","i-lucide-type",{"title":30,"path":31,"stem":32,"icon":33},"Vue Devtools 面板","\u002Fguide\u002Fdevtools","1.guide\u002F12.devtools","i-lucide-wrench",{"title":35,"path":36,"stem":37,"icon":38},"需要注意的行为","\u002Fguide\u002Fbehavior","1.guide\u002F13.behavior","i-lucide-triangle-alert",{"title":40,"path":41,"stem":42,"icon":43},"仓库与本地开发","\u002Fguide\u002Frepo","1.guide\u002F14.repo","i-lucide-folder-git-2",{"title":45,"path":46,"stem":47},"Demo 总览（可交互）","\u002Fguide\u002Fdemos","1.guide\u002F2.demos",{"title":49,"path":50,"stem":51,"icon":52},"自定义节点内容","\u002Fguide\u002Fnode-content","1.guide\u002F3.node-content","i-lucide-layout-template",{"title":54,"path":55,"stem":56,"icon":57},"受控状态与方法","\u002Fguide\u002Fcontrolled","1.guide\u002F4.controlled","i-lucide-sliders-horizontal",{"title":59,"path":60,"stem":61,"icon":62},"复选框与拖拽","\u002Fguide\u002Finteraction","1.guide\u002F5.interaction","i-lucide-mouse-pointer-click",{"title":64,"path":65,"stem":66,"icon":67},"懒加载子节点","\u002Fguide\u002Flazy","1.guide\u002F6.lazy","i-lucide-layers",{"title":69,"path":70,"stem":71,"icon":72},"虚拟滚动 virtual","\u002Fguide\u002Fvirtual","1.guide\u002F7.virtual","i-lucide-scan",{"title":74,"path":75,"stem":76,"icon":72},"画布缩放 OkrTreeViewport","\u002Fguide\u002Fviewport","1.guide\u002F8.viewport",{"title":78,"path":79,"stem":80,"icon":81},"多树根对齐 OkrTreeGroup","\u002Fguide\u002Fgroup","1.guide\u002F9.group","i-lucide-network",{"title":83,"path":84,"stem":85,"icon":86},"主题与样式定制","\u002Ftheme","2.theme","i-lucide-palette",{"title":88,"path":89,"stem":90,"icon":91},"API","\u002Fapi","3.api","i-lucide-braces",{"title":93,"path":94,"stem":95,"icon":96},"与 vue-okr-tree 的差异（迁移说明）","\u002Fmigration","4.migration","i-lucide-arrow-right-left",{"title":98,"path":99,"stem":100,"icon":101},"更新日志","\u002Fchangelog","5.changelog","i-lucide-history",{"id":103,"title":35,"body":104,"description":473,"extension":474,"links":475,"meta":476,"navigation":477,"path":36,"seo":478,"stem":37,"__hash__":479},"docs\u002F1.guide\u002F13.behavior.md",{"type":105,"value":106,"toc":464},"minimark",[107,111,115,132,166,176,186,190,209,278,288,292,331,335,379,382,414,428,431],[108,109,110],"p",{},"页面收录几条容易踩到、且开发期不一定看得见的约定。",[112,113,114],"h2",{"id":114},"回写类方法会改你的源数据",[108,116,117,118,127,128,131],{},"以下方法会",[119,120,121,122,126],"strong",{},"同步修改你传进来的 ",[123,124,125],"code",{},"data"," 对象","（写 ",[123,129,130],{},"children"," 数组、把新节点对象塞进去），与 vue-okr-tree 一致：",[133,134,135,154,160],"ul",{},[136,137,138,141,142,141,145,141,148,141,151],"li",{},[123,139,140],{},"append"," \u002F ",[123,143,144],{},"insertBefore",[123,146,147],{},"insertAfter",[123,149,150],{},"remove",[123,152,153],{},"updateKeyChildren",[136,155,156,159],{},[123,157,158],{},"moveNode","（以及拖拽引发的移动）",[136,161,162,163],{},"懒加载的 ",[123,164,165],{},"resolve(children)",[108,167,168,169,171,172,175],{},"这不是缺陷而是刻意保留的语义：命令式改完之后视图与源数据始终一致，不需要你自己同步状态。但它意味着别把 ",[123,170,125],{}," 当成不可变输入——",[123,173,174],{},"props"," 字段映射后的对象、Redux \u002F pinia store 里的对象会被就地改写；需要「撤销」请自己先深拷贝；同一份数据同时喂给多棵树会互相污染。",[108,177,178,179,181,182,185],{},"想在不改源数据的前提下换内容，正确做法是更新上层状态、让 ",[123,180,125],{}," 的",[119,183,184],{},"引用","变化后由组件重建。",[112,187,189],{"id":188},"未设置-node-key-时的默认-key-策略","未设置 node-key 时的默认 key 策略",[108,191,192,193,196,197,200,201,204,205,208],{},"不配 ",[123,194,195],{},"node-key"," 也能正常渲染与交互：组件会在每个节点的源数据对象上写入一个",[119,198,199],{},"不可枚举","的 ",[123,202,203],{},"$treeNodeId"," 内部 id，作为 ",[123,206,207],{},"v-for"," 的 key。源数据被冻结或只读、写不进去时，降级到内部 WeakMap 记录同样的 id，行为不变（不抛错）。",[108,210,211,212,218,219,222,223,226,227,141,230,233,234,141,237,141,240,141,243,141,246,141,248,251,252,255,256,259,260,263,264,267,268,141,271,141,274,277],{},"代价是：",[119,213,214,215,217],{},"未配 ",[123,216,195],{}," 时节点注册表是空的","，凡是按 key 或按 data 对象定位节点的入参都查不到节点——",[123,220,221],{},"getNode(data 对象)"," 返回 ",[123,224,225],{},"null","，",[123,228,229],{},"getCheckedKeys",[123,231,232],{},"getHalfCheckedKeys"," 返回空数组，",[123,235,236],{},"v-model:expanded-keys",[123,238,239],{},"default-expanded-keys",[123,241,242],{},"current-key",[123,244,245],{},"default-checked-keys",[123,247,153],{},[123,249,250],{},"setCheckedKeys"," 均不生效（开发期会给出警告）。仍然可用的是",[119,253,254],{},"传 Node 实例","：",[123,257,258],{},"#default"," 插槽作用域里的 ",[123,261,262],{},"node","、各事件回调的节点参数，以及不依赖注册表的 ",[123,265,266],{},"getVisibleNodes()","、",[123,269,270],{},"expandAll",[123,272,273],{},"collapseAll",[123,275,276],{},"filter"," 等。",[108,279,280,281,284,285,287],{},"另外，深拷贝源数据（",[123,282,283],{},"JSON.parse(JSON.stringify(data))","、部分状态库的快照恢复）会丢掉这个不可枚举标记，克隆出的对象会被分配新的内部 id、被当作不同节点，展开态随之丢失。需要持久化、跨拷贝定位节点或使用上述按 key 的能力，请配置 ",[123,286,195],{},"。",[112,289,291],{"id":290},"冻结-只读源数据","冻结 \u002F 只读源数据",[108,293,294,295,298,299,302,303,305,306,309,310,141,312,141,314,141,316,141,318,320,321,324,325,327,328,330],{},"渲染、展开收起、过滤、勾选等只读操作在 ",[123,296,297],{},"Object.freeze"," 或外部 store 的 readonly 数据上完全正常。\n但上面列出的",[119,300,301],{},"回写类方法","要改源数据的 ",[123,304,130],{},"：冻结数据下写入这一步被跳过并输出一条开发期警告（不抛错、也不静默失败），而",[119,307,308],{},"视图仍会完成这次增删","（",[123,311,140],{},[123,313,144],{},[123,315,147],{},[123,317,150],{},[123,319,158],{}," \u002F 懒加载 ",[123,322,323],{},"resolve"," 均如此）——于是视图与源数据不再一致，下次 ",[123,326,125],{}," 引用变化重建时该节点会消失。需要在这类数据上做增删，请改为更新上层状态、让 ",[123,329,125],{}," 引用变化后由组件重建。",[112,332,334],{"id":333},"创建期快照的-prop","创建期快照的 prop",[108,336,337,141,339,141,342,345,346,349,350,353,354,357,358,141,360,141,363,141,366,141,369,371,372,141,375,378],{},[123,338,195],{},[123,340,341],{},"direction",[123,343,344],{},"onlyBothTree"," 是",[119,347,348],{},"创建期快照","，运行时改不会生效（开发期会警告并提示换 ",[123,351,352],{},":key"," 重建实例）。",[123,355,356],{},"deep-watch"," 同样只在创建期生效（它是 watch 创建期读取的快照，改值不会重建那个 watch）。其余 prop（",[123,359,125],{},[123,361,362],{},"leftData",[123,364,365],{},"show-collapsable",[123,367,368],{},"default-expand-all",[123,370,174],{}," 映射 \u002F ",[123,373,374],{},"accordion",[123,376,377],{},"draggable"," 等）运行时正常同步。",[108,380,381],{},"两个「初始态」prop 的运行时语义不同，别混：",[133,383,384,397],{},[136,385,386,388,389,392,393,396],{},[123,387,239],{}," 运行时变更 = ",[119,390,391],{},"只追加展开、不收回","：新列表会逐个展开（左右两树都查，",[123,394,395],{},"tree-store.ts:320-329","），但不在新列表里的已展开节点不会被收起，所以净效果只有「加」。",[136,398,399,388,401,309,404,407,408,410,411,413],{},[123,400,245],{},[119,402,403],{},"先清空再按新列表应用",[123,405,406],{},"OkrTree.vue:762"," 走 ",[123,409,250],{},"），且 ",[123,412,125],{}," 重建后不恢复。",[108,415,416,417,419,420,423,424,427],{},"需要「精确控制哪些展开」请用受控的 ",[123,418,236],{},"。以上与姊妹包 react-okr-tree 实测一致（两端各跑一条 ",[123,421,422],{},"defaultExpandedKeys: [1] → [3]"," 的用例，结果都是 ",[123,425,426],{},"[true, true]","）。",[112,429,430],{"id":430},"过滤与可见性",[133,432,433,447,459],{},[136,434,435,438,439,442,443,446],{},[123,436,437],{},"filter('')"," 同样会对每个节点执行 ",[123,440,441],{},"filter-node-method","，需对空值返回 ",[123,444,445],{},"true"," 才能恢复全部显示。",[136,448,449,450,452,453,141,456,287],{},"过滤为全树语义：父节点有可见后代时保持可见；被 ",[123,451,276],{}," 隐藏的节点不计入 ",[123,454,455],{},"aria-setsize",[123,457,458],{},"aria-posinset",[136,460,461,462,287],{},"折叠的子树仍挂载在 DOM 中，所以「DOM 里的节点数」不等于可见节点数，取真正可见的节点请用 ",[123,463,266],{},{"title":465,"searchDepth":466,"depth":466,"links":467},"",2,[468,469,470,471,472],{"id":114,"depth":466,"text":114},{"id":188,"depth":466,"text":189},{"id":290,"depth":466,"text":291},{"id":333,"depth":466,"text":334},{"id":430,"depth":466,"text":430},"回写源数据、node-key 缺失、冻结 \u002F 只读数据等边界行为清单","md",null,{},{"icon":38},{"title":35,"description":473},"r3wra3-mZcZtnWdgVrPOQT2A-Yfi5Gq38ds9cp8R3pE",[481,483],{"title":30,"path":31,"stem":32,"description":482,"icon":33,"children":-1},"开发期 OkrTree 面板：树实例列表、概要统计与节点注册表的可视化调试",{"title":40,"path":41,"stem":42,"description":484,"icon":43,"children":-1},"仓库目录结构、三份真源与本地开发命令",1790437331187]