vue树形组件递归,每次修改任意一个叶子,都必须触发把节点组装为树的函数吗?是不是效率有点低?

我的神
  • 927

服务器回来的是扁平数组, 组装成一个树形根节点,这个步骤Fn函数实现。

组件递归后, 每一个叶子节点可编辑。

那么每次编辑,都要重新执行一次 Fn吗?

是否效率低?

如代码:image.png

换一种说法介绍一下:
从服务器拉取一次数据后。因为vue组件不能双向修改自己本身的节点数据,叶子组件修改了数据,要把新数据发给根组件,根组件才有权利更新根数据。所以怀疑效率。

相比一下,请问 叶子节点 直接修改自己的props 是否合理和高效。

回复
阅读 1.5k
3 个回答

每个叶子是一个Object 引用类型。 所以根组件里只更新 对应的某个叶子的数据就行。不必重复执行Fn。

你每次刷新数据都往后端请求的话,确实无法避免。但是不用担心的是,Fn这个函数如果写成O(n)复杂度的话,反正数据量不上10w都是毫秒级别完成,完全不用担心效率问题。——效率确实低,但是可以不在这上面浪费时间

这是最简单的方式.
如楼上所说,其实不需要在这里费太多精力.纯js运算,不会耗费太多时间.
而vue自身有优化,即便数据发生了变化,也会只更新变化的dom.

如果非要优化,可以在fn中为每个节点加上路径,然后修改某个节点时,将新值与路径一起交给父组件,父组件根据路径直接去修改指定值,这样可以节约一些时间.

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏