fix(hmr/keep-alive): fix error in reload component (#7042)

[zhangzhonghe]

fix #7042

[zhangzhonghe]

@yyx990803 你好，我发现这个 PR 与 #6809 重复了，并且你已经合并了 6809。但是我有一个疑问，就是 6809 的修复并不能通过我提供的测试，热更新的时候它没有调用旧组件的unmounted生命周期函数。

我觉得被KeepAlive包裹的组件热更新的时候应该把旧的组件给卸载了，因为新的组件是重新挂载的。不知道我对不对，望赐教。(●'◡'●)

[edison1105]

@zhangzhonghe
预期的行为是：当KeepAlive卸载的时候才卸载其内部组件。
我觉得热更新时是否调用内部组件的unmounted没那么重要，毕竟只是开发环境下的行为。

[zhangzhonghe]

@zhangzhonghe 预期的行为是：当KeepAlive卸载的时候才卸载其内部组件。 我觉得热更新时是否调用内部组件的unmounted没那么重要，毕竟只是开发环境下的行为。

是的。但是修改后的新组件是会调用 mounted 的，这可能产生一些问题。比如，如果用户在 mounted 阶段注册了一些监听器且需要在 unmounted 阶段销毁的话，就会有问题，因为旧组件的 unmounted 没有被调用，也就无法销毁，如果这种情况下频繁热更新的话可能会导致内存泄漏。

[edison1105]

@zhangzhonghe 预期的行为是：当KeepAlive卸载的时候才卸载其内部组件。 我觉得热更新时是否调用内部组件的unmounted没那么重要，毕竟只是开发环境下的行为。

是的。但是修改后的新组件是会调用 mounted 的，这可能产生一些问题。比如，如果用户在 mounted 阶段注册了一些监听器且需要在 unmounted 阶段销毁的话，就会有问题，因为旧组件的 unmounted 没有被调用，也就无法销毁，如果这种情况下频繁热更新的话可能会导致内存泄漏。

有道理。

[shengxinjing]

有道理，不过位运算的清理用-=不太稳妥，用 a &= ~b 会好一些

[zhangzhonghe]

有道理，不过位运算的清理用-=不太稳妥，用 a &= ~b 会好一些

我是参考的这里的代码：

core/packages/runtime-core/src/components/KeepAlive.ts

Lines 426 to 435 in b8891ec

	function resetShapeFlag(vnode: VNode) {
	let shapeFlag = vnode.shapeFlag
	if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
	shapeFlag -= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
	}
	if (shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
	shapeFlag -= ShapeFlags.COMPONENT_KEPT_ALIVE
	}
	vnode.shapeFlag = shapeFlag
	}

[yyx990803]

确实，保证 unmount 是必要的

[shengxinjing]

有道理，不过位运算的清理用-=不太稳妥，用 a &= ~b 会好一些

我是参考的这里的代码：

core/packages/runtime-core/src/components/KeepAlive.ts

Lines 426 to 435 in b8891ec

	function resetShapeFlag(vnode: VNode) {
	let shapeFlag = vnode.shapeFlag
	if (shapeFlag & ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE) {
	shapeFlag -= ShapeFlags.COMPONENT_SHOULD_KEEP_ALIVE
	}
	if (shapeFlag & ShapeFlags.COMPONENT_KEPT_ALIVE) {
	shapeFlag -= ShapeFlags.COMPONENT_KEPT_ALIVE
	}
	vnode.shapeFlag = shapeFlag
	}

我去PR优化一下下