vue3页面加载完成后怎么获取宽度、高度

要在Vue 3中获取页面加载完成后的宽度和高度，可以使用DOM操作来获取页面元素的宽度和高度。在Vue中，可以使用钩子函数来实现这个目标。钩子函数是Vue实例生命周期中的一种方法，可以在特定的阶段执行代码。在本例中，我们将在mounted钩子函数中获取页面加载完成后的宽度和高度。 首先，我们需要在Vue的脚本部分定义一个新的方法来获取宽度和高度。我们可以使用`window.innerWidth`来获取窗口宽度，使用`window.innerHeight`来获取窗口高度。然后，我们将宽度和高度保存到Vue实例的数据中，以便在模板中使用。 下面是代码示例：

在上述示例中，我们首先在data方法中定义了两个变量windowWidth和windowHeight来保存宽度和高度。然后，在mounted钩子函数中调用getWindowSize方法来获取宽度和高度，并将其保存到数据中。我们还为window对象的resize事件添加了一个侦听器，在窗口大小改变时重新获取宽度和高度。在beforeUnmount钩子函数中，我们从window对象的resize事件中移除了侦听器，以防止内存泄漏。 现在，我们可以在模板中使用这些数据来显示宽度和高度。例如，可以使用`{{ windowWidth }}`和`{{ windowHeight }}`来显示当前窗口的宽度和高度。 综上所述，使用Vue 3获取页面加载完成后的宽度和高度可以通过在mounted钩子函数中使用DOM操作来实现。我们可以创建一个新的方法来获取宽度和高度，并将其保存到Vue实例的数据中。然后，在模板中使用这些数据来显示宽度和高度的值。