Version
4.1.6
Reproduction link
codesandbox.io
Steps to reproduce
- Open linked CodeSandbox
- Observe Console
- Click on "Home - A", and then on "Home - B"
What is expected?
Should not log at all, because the component has receives no props and does not depend on any reactive data from the router.
So when a child route changes, it should not update.
What is actually happening?
Home.vue console.logs 3 times, meaning it re-rendered multiple times.
I'm pretty sure the reason for that is that router-view needs to re-render multiple times, and each time, a new onVNodeUnmounted callback is added to the VieComponent vnode's props object here:
|
const onVnodeUnmounted: VNodeProps['onVnodeUnmounted'] = vnode => { |
|
// remove the instance reference to prevent leak |
|
if (vnode.component!.isUnmounted) { |
|
matchedRoute.instances[currentName] = null |
|
} |
|
} |
|
|
|
const component = h( |
|
ViewComponent, |
|
assign({}, routeProps, attrs, { |
|
onVnodeUnmounted, |
So from the POV of Vue, the props changed. So it will run an update cycle of the router view.
Version
4.1.6
Reproduction link
codesandbox.io
Steps to reproduce
What is expected?
Should not log at all, because the component has receives no props and does not depend on any reactive data from the router.
So when a child route changes, it should not update.
What is actually happening?
Home.vue console.logs 3 times, meaning it re-rendered multiple times.
I'm pretty sure the reason for that is that
router-viewneeds to re-render multiple times, and each time, a newonVNodeUnmountedcallback is added to the VieComponent vnode's props object here:router/packages/router/src/RouterView.ts
Lines 160 to 170 in e008551
So from the POV of Vue, the props changed. So it will run an update cycle of the router view.