【study】el-tree右侧有上移按钮，点击之后视图不更新，原因是什么？

• 问题：el-tree右侧有一个slot，操作是上移下移操作，点击上移，控制台可以显示出数组的正确排列，可视图却每天更新，原因是什么？
• 思考：数据已经改变，视图不更新，很有可能是和vue的虚拟dom和其diff算法有关。
• 虚拟dom和diff算法：vue使用虚拟dom来检测和应用实际dom的更新，在vue进行渲染时，会生成虚拟dom来表示，并且在后续更新时，通过diff算法对比新旧虚拟dom，就可确定哪些部分需要更新。
• key属性的作用：key在vue中用于标识VNode（虚拟节点）的唯一性。当vue进行diff对比时，它会视同key来判断是否需要对某个节点进行更新，复用，删除或重新创建，使用key总是建议的做法，特别是在列表的渲染中，它能显著提高性能，并且确保正确性。
• 视图不更新的原因：如果vue无法正确识别节点，可能会导致视图未能按照预期更新，具体来说，如果不使用key或key不唯一。vue可能会复用错误的节点，从而导致不必要的更新或者完全无法更新。
• 解决：可通过每次更新节点数据时，强制更新key,从而强制vue重新渲染这些节点，而不是试图复用旧节点，这样能够确保视图与数据完全同步。

   <el-tree
         ref="treeDialogRef"
         :key="updateKey"  // 设置初始值为0 ,每次点击上移下移的操作，可以++
         class="width100 tree"
         :data="originTreeData"
         :props="defaultProps"
         show-checkbox
         :expand-on-click-node="false"
         :filter-node-method="filterNode"
         node-key="frontCategoryId"
         @node-click="handleNodeClick"
  >
        <span
             slot-scope="{ node, data }"
             class="custom-tree-node"
         >
         ......