watch Unable to Track Changes on window Object in Parent When Accessed from an iframe

[bosens-China]

Vue version

3.4.36

Link to minimal reproduction

https://codesandbox.io/p/devbox/vue3-watch-bug-7hvzwf?layout=%257B%2522sidebarPanel%2522%253A%2522EXPLORER%2522%252C%2522rootPanelGroup%2522%253A%257B%2522direction%2522%253A%2522horizontal%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522id%2522%253A%2522ROOT_LAYOUT%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522UNKNOWN%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522cm0en20ch00073b6mmyvq69hr%2522%252C%2522sizes%2522%253A%255B70%252C30%255D%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522EDITOR%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522EDITOR%2522%252C%2522id%2522%253A%2522cm0en20ch00023b6m11rk1xc0%2522%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522direction%2522%253A%2522horizontal%2522%252C%2522id%2522%253A%2522SHELLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522SHELLS%2522%252C%2522id%2522%253A%2522cm0en20ch00043b6mwjkmiznj%2522%257D%255D%257D%255D%257D%252C%257B%2522type%2522%253A%2522PANEL_GROUP%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522direction%2522%253A%2522vertical%2522%252C%2522id%2522%253A%2522DEVTOOLS%2522%252C%2522panels%2522%253A%255B%257B%2522type%2522%253A%2522PANEL%2522%252C%2522contentType%2522%253A%2522DEVTOOLS%2522%252C%2522id%2522%253A%2522cm0en20ch00063b6mvcp9an66%2522%257D%255D%257D%255D%252C%2522sizes%2522%253A%255B50%252C50%255D%257D%252C%2522tabbedPanels%2522%253A%257B%2522cm0en20ch00023b6m11rk1xc0%2522%253A%257B%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0en20ch00013b6mqz4u4g4m%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522FILE%2522%252C%2522filepath%2522%253A%2522%252FREADME.md%2522%257D%255D%252C%2522id%2522%253A%2522cm0en20ch00023b6m11rk1xc0%2522%252C%2522activeTabId%2522%253A%2522cm0en20ch00013b6mqz4u4g4m%2522%257D%252C%2522cm0en20ch00063b6mvcp9an66%2522%253A%257B%2522id%2522%253A%2522cm0en20ch00063b6mvcp9an66%2522%252C%2522activeTabId%2522%253A%2522cm0en2ipj00123b6mftelnpqe%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0en20ch00053b6mw7tivz14%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_PORT%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%252C%2522port%2522%253A5173%257D%252C%257B%2522type%2522%253A%2522TASK_PORT%2522%252C%2522port%2522%253A5173%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%252C%2522id%2522%253A%2522cm0en2ipj00123b6mftelnpqe%2522%252C%2522mode%2522%253A%2522permanent%2522%257D%255D%257D%252C%2522cm0en20ch00043b6mwjkmiznj%2522%253A%257B%2522id%2522%253A%2522cm0en20ch00043b6mwjkmiznj%2522%252C%2522tabs%2522%253A%255B%257B%2522id%2522%253A%2522cm0en20ch00033b6mnwc0fadr%2522%252C%2522mode%2522%253A%2522permanent%2522%252C%2522type%2522%253A%2522TASK_LOG%2522%252C%2522taskId%2522%253A%2522pnpm%2520run%2520dev%2522%257D%255D%252C%2522activeTabId%2522%253A%2522cm0en20ch00033b6mnwc0fadr%2522%257D%257D%252C%2522showDevtools%2522%253Atrue%252C%2522showShells%2522%253Atrue%252C%2522showSidebar%2522%253Atrue%252C%2522sidebarPanelSize%2522%253A15%257D

Steps to reproduce

After opening the link, click the button to load other views, and then click the add button. You will find that the value of the nested iframe has not changed, but in fact, this value has already changed.

What is expected?

The responsive system can work normally and listen for changes in ref

What is actually happening?

Clicking to add nothing happened

System Info

No response

Any additional comments?

No response

[bosens-China]

[edison1105]

When Vue.js is loaded separately in both the main application (Parent.vue) and the embedded iframe, their memory variables are not shared. This results in the following behavior during rendering and updates:

1. Independent Memory Space: Since Vue.js is loaded separately in the main application and the iframe, the memory variables are independent. For example, there will be two instances of targetMap, one in the main application (targetMapA) and another in the iframe (targetMapB).

2. Dependency Collection: During the initial render, the dependencies for title in the main application will be collected into targetMapA, while the dependencies for title in the iframe will be collected into targetMapB.

3. Update Mechanism: When the title in the main application is updated, it will look up the related dependencies in targetMapA and trigger the update. Since targetMapB in the iframe is independent, the content within the iframe will not be re-rendered.

[bosens-China]

When Vue.js is loaded separately in both the main application (Parent.vue) and the embedded iframe, their memory variables are not shared. This results in the following behavior during rendering and updates:

1. Independent Memory Space: Since Vue.js is loaded separately in the main application and the iframe, the memory variables are independent. For example, there will be two instances of targetMap, one in the main application (targetMapA) and another in the iframe (targetMapB).
2. Dependency Collection: During the initial render, the dependencies for title in the main application will be collected into targetMapA, while the dependencies for title in the iframe will be collected into targetMapB.
3. Update Mechanism: When the title in the main application is updated, it will look up the related dependencies in targetMapA and trigger the update. Since targetMapB in the iframe is independent, the content within the iframe will not be re-rendered.

It still feels a bit strange. I used a ref mounted with 'parent' in child.vue, doesn't 'parent' point to the window

[bosens-China]

@edison1105 After seeing your reply, I still find it somewhat counterintuitive. I mounted the current reactive type to the window object in the main window, and in the child iframe, it is also accessed based on the parent. They point to the same memory address. However, when modifying it in the child iframe, the reactive variable mounted under the main window's window object doesn't have its dependencies correctly collected. I'd like to ask whether this behavior is intentional or if it's a bug. Could you provide some clarification?

[edison1105]

You can set a breakpoint here. When the key is title, activeEffect is undefined, so no dependencies are tracked. This happens because activeEffect is still within the context of the main application, not the iframe. This might occur because props are passed from the parent window, and when accessing props.value.title, the context switches back to the parent window. At this point, the parent window no longer has any active components being rendered, so activeEffect is empty, leading to a failure in dependency tracking.

The process is as follows:

1. Rendering Child.vue: Inside the iframe, activeEffect is correctly assigned.
2. Accessing props.value.title: The context switches back to the parent window, where activeEffect is undefined, causing nothing to be tracked.
3. title changes: Since dependencies were not successfully tracked, Child.vue cannot react to changes in title.

[bosens-China]

You can set a breakpoint here. When the key is title, activeEffect is undefined, so no dependencies are tracked. This happens because activeEffect is still within the context of the main application, not the iframe. This might occur because props are passed from the parent window, and when accessing props.value.title, the context switches back to the parent window. At this point, the parent window no longer has any active components being rendered, so activeEffect is empty, leading to a failure in dependency tracking.

Got it, but in this situation, besides using postMessage, what other methods can I use to handle this scenario?

[edison1105]

You can try BroadcastChannel, too
It's outside the scope of vue.

[daihuabin]

@edison1105 I also encountered this problem. Have you considered modifying the way to obtain activeEffect to allow adding the activeEffect of the parent window to the reactive object, such as adding a function connectActiveEffect(reactiveObject)

[Hetari]

After experimenting with the code, I was able to resolve this issue.

Note: The fix may be slow in CodeSandbox. However, it runs smoothly and quickly in regular browsers like Chrome, Firefox, Brave, and Opera

Check it out here:
https://codesandbox.io/p/devbox/vue3-watch-bug-solution-forked-lfhycq

and see this AI search result, it might be helpful: