Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(VTreeview): prevent redundant treeview re-render during open #19968

Merged
merged 3 commits into from
Jun 11, 2024

Conversation

yuwu9145
Copy link
Member

@yuwu9145 yuwu9145 commented Jun 7, 2024

fixes #19919

Description

  • Open action SHOULD NOT trigger any re-rendering
  • VTreeview has redundant re-rendering from v-model:opened change
  • This fix should prevent some of redundant renderings and enhance performance noticeably
  • After this PR, the remaining redundant rendering should be resolved in the upstream library babel-plugin-jsx

Markup:

<template>
  <v-treeview 
    :items="items"
    @update:opened="openedUpdate"
    ></v-treeview>
</template>

<script>
  export default {
    computed: {
      items: () => {
        const GetChildren = id => {
          const nodes = []
          for (let i = 0; i < 100; i++) {
            nodes.push({
              id: `${id}-${i}`,
              title: `Example child item ${i}`,
            })
          }
          return nodes
        }
        const nodes = []
        for (let i = 0; i < 100; i++) {
          nodes.push({
            id: i,
            title: `Example item ${i}`,
            children: GetChildren(i),
          })
        }
        return nodes
      },
    },
    methods: {
openedUpdate: function(e) {
  console.log('openedUpdate', e)
}
    },
    data: () => ({}),
  }
</script>

@yuwu9145 yuwu9145 changed the title fix(VTreeview): prevent treeview re-render during open fix(VTreeview): prevent redundant treeview re-render during open Jun 7, 2024
@@ -146,7 +147,8 @@ export const VTreeview = genericComponent<new <T>(
})

useRender(() => {
const listProps = VList.filterProps(props)
const listProps = VList.filterProps(vm.vnode.props!)
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Avoid non-existing prop being assigned as undefined to VList

If @update:opened="openedListener" is used in Treeview, VList.filterProps(props) is equivalent to <VList :opened="undefined" @update:opened="openedListener">, which breaks VList demo

@yuwu9145 yuwu9145 marked this pull request as ready for review June 9, 2024 00:43
@yuwu9145 yuwu9145 requested review from KaelWD and johnleider June 9, 2024 00:43
@johnleider johnleider added this to the v3.6.x milestone Jun 10, 2024
@johnleider johnleider added T: bug Functionality that does not work as intended/expected C: VTreeview VTreeview labels Jun 10, 2024
@johnleider
Copy link
Member

This does provide an improvement, but it's still very slow and only appears to work when opening and closing a single group. When you move to the next one or back, it's still a 2-3 second delay before it displays.

@yuwu9145
Copy link
Member Author

This does provide an improvement, but it's still very slow and only appears to work when opening and closing a single group. When you move to the next one or back, it's still a 2-3 second delay before it displays.

The remaining latency is caused by vuejs/babel-plugin-jsx#712. If you remove v-slots usages in lines 120, 129 & 138 in VTreeviewChildren.tsx on top of this PR, expanding will be zero latency.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
C: VTreeview VTreeview T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.8] VTreeview slow performance on expand
2 participants