Vue中调用windo几种方式-对象的几种方式-当窗口大小改变时方法会被调用从而更新数据属性

作者：编程小白 | 发布时间：2025-07-09 |

Vue中调用window对象的几种方式

在Vue里，我们有时候需要用到浏览器自带的window对象。下面我们就来看看有哪些简单又直接的方法来调用它。

一、直接在Vue组件内调用

在Vue组件里，你可以直接用window对象。比如，你可以在methods或者computed属性里用window对象。

示例：

```javascript methods: { showAlert() { window.alert('Hello, World!'); } } ``` 这种方式简单明了，大多数情况下都能用得上。

二、通过生命周期钩子函数调用

Vue的生命周期钩子是操作DOM和调用window对象的绝佳时机。常用的钩子有mounted、updated和beforeDestroy。 - mounted：当你需要组件挂载到DOM后再调用window对象的时候用。 - updated：当组件更新后需要调用window对象的时候用。 - beforeDestroy：当组件销毁前需要调用window对象的时候用。

示例：

```javascript mounted() { window.addEventListener('resize', this.handleResize); }, beforeDestroy() { window.removeEventListener('resize', this.handleResize); }, methods: { handleResize() { console.log('Window resized!'); } } ``` 在这个例子中，我们在mounted钩子中添加了一个resize事件监听器，在beforeDestroy钩子中移除了它，这样就能确保事件监听器能正确地被添加和移除。

三、利用Vue指令调用

Vue的自定义指令是个很强大的工具，可以用来直接操作DOM。通过自定义指令，我们也能方便地调用window对象。

示例：

```javascript Vue.directive('resize', { bind(el, binding) { const handler = () => { binding.value(); }; window.addEventListener('resize', handler); el.__resizeHandler__ = handler; }, unbind(el) { window.removeEventListener('resize', el.__resizeHandler__); } }); ``` 在这个例子中，我们创建了一个自定义指令来监听window的resize事件。当窗口大小改变时，方法会被调用，从而更新数据属性。

四、结合第三方库使用window对象

在一些复杂的情况下，你可能需要结合第三方库来使用window对象。比如，用lodash库的throttle功能来限制window事件的触发频率。

示例：

```javascript methods: { handleResize: _.throttle(function() { console.log('Window resized!'); }, 200) } ``` 在这个例子中，我们使用了lodash的throttle功能来限制resize事件处理函数的调用频率。这在处理像resize和scroll这样的高频事件时特别有用。在Vue中调用window对象的方式有很多种。直接调用适用于简单的场景，通过生命周期钩子调用适用于特定生命周期的操作，利用Vue指令调用适用于直接操作DOM的场景，结合第三方库使用适用于复杂的场景。掌握这些方法能让你更灵活地处理各种需求。