Skip to content

Make RouterLink a functional component #3406

Closed
@FluencyMatt

Description

@FluencyMatt

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)
}

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions