vue3onmounted：vue3onmounted比setup先执行——

vue3所有hook的作用

Vue3中的Hooks主要用于封装和复用组件逻辑，提供了更灵活、更可复用的方式来组织和复用代码。以下是Vue3中一些主要Hooks的作用：基础响应式Hooks ref（）：用于创建一个可变的响应式引用，适用于基本类型值、DOM引用、表单值绑定等场景。它返回一个响应式的对象，其.value属性指向被包裹的值。

掌握Vue3中的Hook函数，能够更优雅地处理组件状态和视图更新，是提升开发效率的关键技能。

Vue 3中的Hook机制提供了一种更灵活和可组合的方式来组织和复用组件逻辑。通过使用Composition API和Hook函数，你可以更好地管理组件的状态、事件处理和跨组件通信等逻辑。这使得Vue 3的开发更加清晰、简洁和易于维护。同时，Hook机制也促进了代码复用和逻辑拆分，提高了开发效率和代码质量。

vue2和vue3的区别

1、综上所述，Vue2与Vue3在响应性、运行时、编译器以及其他功能点等方面都存在显著差异。这些差异使得Vue3在性能、灵活性和可扩展性等方面都得到了显著提升。因此，对于正在学习或使用Vue.js的开发者来说，了解这些差异并熟练掌握Vue3的新特性是非常重要的。

2、Vue 2：不支持在同一模板中渲染多个根节点（即不支持片段）。Vue 3：引入了 Fragment 组件，允许在一个组件中返回多个顶级元素。

3、Vue2：在template下只允许存在一个根节点。Vue3：则允许存在多个根节点，Vue3会创建一个虚拟的Fragment节点来包裹这些根节点。定义数据变量 Vue2：数据通常放在data选项中，方法放在methods选项中。Vue3：在setup方法中定义数据，使用reactive和ref将数据变成响应式数据。setup方法在组件初始化时触发。

4、Vue 3 内置了更好的 TypeScript 支持，使得使用 TypeScript 开发 Vue 应用更加便捷。性能对比通过搭建 Vue 2 和 Vue 3 的项目，并实现一个简单的动态列表来测试性能，可以发现 Vue 3 在处理大量数据时的渲染性能明显优于 Vue 2。

5、生命周期的变化：Vue3 的生命周期方法名字通常需要加上 on 前缀，与 Vue2 的命名保持一致但使用方式略有不同。多根节点支持：Vue3 引入了多根节点的支持，允许组件包含多个根节点，提高了开发效率。异步组件处理：Vue3 提供了 Suspense 组件，用于在异步加载组件时显示占位内容，提升了用户体验。

vue怎么监听切换窗口变化

在Vue中监听切换窗口变化，可以通过使用visibilitychange事件监听器和Vue Router提供的导航守卫两种方式实现。使用visibilitychange事件监听器 原理：visibilitychange事件用于监听页面可见性的变化。

在Vue单页面应用中，可以通过监听visibilitychange事件来判断页面是否被用户重新激活。当页面重新激活时，检查token是否已改变。如果token已改变，则执行相应的刷新操作，如清空store值或重新获取登录状态。

监听事件：在Vue组件中，通过监听输入框的focus和blur事件，以及窗口的resize事件，可以判断键盘的弹出和收回状态。动态调整：当键盘弹出时，可以动态调整页面布局或隐藏被顶起的底部元素，以确保页面布局不被破坏。