在 Vue.js 开发中，我们经常需要监听浏览器窗口大小的变化，以便在页面布局中做出相应的调整。在这种情况下，我们需要使用 resize 事件来监听窗口大小的变化。那么在 Vue.js 中，如何监听 resize 事件呢？本文将为大家详细介绍。
监听 resize 事件的方法
在 Vue.js 中，我们可以使用 @resize 或者 v-on:resize 来监听 resize 事件。例如：
----------
---- -----------------------
---- ---- ---
------
-----------
--------
------ ------- -
-------- -
-------------- -
--------------------------
-
-
--
---------上面的代码中，我们在 div 标签上使用了 @resize 来监听 resize 事件，并且绑定了 handleResize 方法。当窗口大小发生变化时，handleResize 方法就会被触发，从而执行相应的操作。
需要注意的是，@resize 只能在普通的 DOM 元素上使用，而不能在 Vue 组件上使用。如果我们需要在 Vue 组件中监听 resize 事件，可以使用 window.addEventListener 来实现。
在 Vue 组件中监听 resize 事件
在 Vue 组件中监听 resize 事件，我们需要在组件的 created 钩子函数中，使用 window.addEventListener 来注册 resize 事件的监听器。例如：
----------
-----
---- ---- ---
------
-----------
--------
------ ------- -
--------- -
--------------------------------- -------------------
--
----------- -
------------------------------------ -------------------
--
-------- -
-------------- -
--------------------------
-
-
--
---------上面的代码中，我们在组件的 created 钩子函数中，使用 window.addEventListener 来注册 resize 事件的监听器，并且绑定了 handleResize 方法。当组件销毁时，我们需要使用 window.removeEventListener 来移除 resize 事件的监听器，以免出现内存泄漏的问题。
示例代码
下面是一个完整的示例代码，演示了如何在 Vue.js 中监听 resize 事件：
----------
-----
------ ------- -------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ------- --------
--
--
--------- -
--------------------------------- -------------------
--
----------- -
------------------------------------ -------------------
--
-------- -
-------------- -
--------------------------
-
-
--
---------在上面的代码中，我们在组件的 created 钩子函数中，使用 window.addEventListener 来注册 resize 事件的监听器，并且绑定了 handleResize 方法。当窗口大小发生变化时，handleResize 方法就会被触发，从而打印出一条消息。当组件销毁时，我们使用 window.removeEventListener 来移除 resize 事件的监听器，以免出现内存泄漏的问题。
总结
通过本文的介绍，我们了解了在 Vue.js 中如何监听 resize 事件。在普通的 DOM 元素上，我们可以使用 @resize 或者 v-on:resize 来监听 resize 事件，而在 Vue 组件中，我们需要使用 window.addEventListener 来注册 resize 事件的监听器。希望本文能够对大家有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d22650add4f0e0ffa9a23b