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

Make RouterLink a functional component #3406

Closed
FluencyMatt opened this issue Dec 7, 2020 · 1 comment
Closed

Make RouterLink a functional component #3406

FluencyMatt opened this issue Dec 7, 2020 · 1 comment

Comments

@FluencyMatt
Copy link

What problem does this feature solve?

When there are hundreds of RouterLink components on a page (in table columns for instance), page performance suffers due to the overhead of maintaining all those instances. In our app, Vue dev tools Performance tab puts RouterLink at or near the top of the list. This feature will significantly reduce the render cost of RouterLink.

What does the proposed API look like?

Switching RouterLink to functional: true should be backwards compatible without adding anything to the API. I propose something like the following. My initial testing is promising. Happy to submit the PR.

functional: true,
render: function render (h, context) {
    const router = context.parent.$router
    const current = context.parent.$route
    ... <etc. following all the functional component rules>
    const data: any = { class: [classes, context.data.staticClass, context.data.class] }
    ...
    return h(context.props.tag, data, context.$slots.default)
}
@posva
Copy link
Member

posva commented Dec 7, 2020

See #2029

@posva posva closed this as completed Dec 7, 2020
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants