vue2watch监听window
时间: 2023-10-22 17:05:52 浏览: 74
对象的变化,有什么实际应用场景和用法吗?
Vue2中提供了`$watch`来监听Vue实例中的数据变化,而`$watch`的参数可以是一个字符串或者函数,但是如果需要监听window对象的变化,只能使用Vue2提供的`watchEffect`,即允许用户监听数据源的响应式变化的异步方法。
对于监听window对象的变化,通常是用来监听浏览器窗口尺寸的变化,从而自适应地调整网页布局。另外,有些页面可能需要根据浏览器中的滚动位置来做一些操作(例如固定导航栏),那么也可以使用`watch`来监听`window.scrollY`和`window.scrollX`这两个属性的变化。
相关问题
vue中watch监听innerheight
这是一个技术问题,我可以回答。在Vue中,可以使用watch属性来监听一个变量的变化。innerHeight是窗口的高度值,可以使用window对象来获取。在Vue中监听innerHeight的变化可以采用以下代码:
```
watch: {
'$route': {
handler: function () {
window.onresize = () => {
this.windowHeight = window.innerHeight
}
},
immediate: true
}
}
```
这是一个监听路由变化并且在窗口大小发生变化时获取innerHeight的例子。
vue2中watch监听alert怎么用
在 Vue2 中,可以使用 `watch` 属性来监听数据的变化。如果要监听 `alert` 函数的调用,可以使用以下代码:
```javascript
watch: {
'$vuetify.alert': function (newValue, oldValue) {
// Do something when alert is called
}
}
```
在上面的代码中,`'$vuetify.alert'` 是一个字符串,表示要监听的属性名。这个属性名是 Vuetify 库内部定义的,用于触发弹出框的显示。当弹出框显示时,`newValue` 参数为 `true`,当弹出框消失时,`newValue` 参数为 `false`。`oldValue` 参数则表示上一次的值。
需要注意的是,`watch` 属性只能监听 Vue 实例中已有的属性或者计算属性,不能监听全局函数。因此,如果想要在 Vue2 中监听全局的 `alert` 函数,需要使用浏览器原生的 `window.alert` 函数,并在调用时手动触发 `watch` 函数。