mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-15 01:03:03 +08:00
5bc439961f
Issue number: resolves #28774 --------- <!-- Please do not submit updates to dependencies unless it fixes an issue. --> <!-- Please try to limit your pull request to one type (bugfix, feature, etc). Submit multiple pull requests if needed. --> ## What is the current behavior? <!-- Please describe the current behavior that you are modifying. --> There are two issues causing Ionic Vue apps to not behave as intended with certain versions of Vue: 1. In Vue 3.3 a [breaking change shipped](https://github.com/vuejs/core/issues/9916) that changes the default behavior of the `watch` inside of IonRouterOutlet to be a shallow watcher instead of a deep watcher. This caused the router outlet to not consistent re-render. While the change was later reverted by the Vue team, they expressed that the change [may re-land in a future minor release](https://github.com/vuejs/core/issues/9965#issuecomment-1875067499). As a result, we will need to account for this inside of Ionic. 2. In Vue 3.2 a [custom elements improvement shipped](https://github.com/vuejs/core/blob/main/changelogs/CHANGELOG-3.2.md#3238-2022-08-30) that changed how custom elements are referred to in VNodes. ## What is the new behavior? <!-- Please describe the behavior or changes that are being added by this PR. --> - The affected `watch` call now is now explicitly a deep watcher. This change is backwards compatible as well as forward compatible with upcoming Vue changes. - Updated IonTabs to account for the new VNode behavior for custom elements. Ionic still supports version of Vue that do not have this improvement, so we need to account for both behaviors for now. I also added a tech debt ticket to remove the old checks when we drop support for older versions of Vue. - Updated E2E test dependencies. During this update some of our tests needed to be updated to account for newer versions of Vue/Vitest. Overall I was able to simplify a lot of our tests as a result. I plan to add renovatebot to these E2E test apps, but I will handle that in a separate PR. ## Does this introduce a breaking change? - [ ] Yes - [x] No <!-- If this introduces a breaking change: 1. Describe the impact and migration path for existing applications below. 4. Update the BREAKING.md file with the breaking change. 5. Add "BREAKING CHANGE: [...]" to the commit description when merging. See https://github.com/ionic-team/ionic-framework/blob/main/.github/CONTRIBUTING.md#footer for more information. --> ## Other information <!-- Any other information that is important to this PR such as screenshots of how the component looks before and after the change. --> Dev build: `7.6.6-dev.11705526292.1bc0acb5` Note: Both of the issues cause tests to fail when using the latest dependencies in the Vue E2E test app. However, I need to use the latest dependencies so I can demonstrate that my changes do fix the reported issues. As a result, I have both fixes in the same PR.