Closed
Description
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
Labels
No labels