vue2watch监听window

对象的变化，有什么实际应用场景和用法吗？

Vue2中提供了`$watch`来监听Vue实例中的数据变化，而`$watch`的参数可以是一个字符串或者函数，但是如果需要监听window对象的变化，只能使用Vue2提供的`watchEffect`，即允许用户监听数据源的响应式变化的异步方法。

对于监听window对象的变化，通常是用来监听浏览器窗口尺寸的变化，从而自适应地调整网页布局。另外，有些页面可能需要根据浏览器中的滚动位置来做一些操作（例如固定导航栏），那么也可以使用`watch`来监听`window.scrollY`和`window.scrollX`这两个属性的变化。

相关问题

vue watch 监听 window.sessionStorage

Vue中的watch选项可以用来监听一个Vue实例中的数据变化，当数据发生变化时，watch函数会自动执行。而window.sessionStorage是一种浏览器存储机制，可以用来在同一浏览器的不同页面之间共享数据。要在Vue中监听window.sessionStorage的变化，可以通过以下方式进行：

watch: {
  '$sessionStorage.yourData': function (newValue, oldValue) {
    // 监听 window.sessionStorage 中 yourData 的变化
    // newValue 为变化后的值，oldValue 为变化前的值
    // 这里可以进行相应的操作
  }
}

在上述代码中，`$sessionStorage` 是 Vue 的插件 `vue-session` 提供的全局属性，可以直接访问 `window.sessionStorage` 中的数据。当 `yourData` 数据发生变化时，`watch` 中定义的函数会自动执行。

vue3 watch监听url

Vue3中的`watch`可以用于监听URL的变化，特别是在单页应用(Single Page Application, SPA)中，当路由发生变化时，我们可以使用`watch`来响应并更新组件的状态。通常，我们会结合`beforeRouteUpdate`或`beforeRouteEnter`钩子来配合`watch`一起工作。

以下是基本的步骤：

1. 定义一个`watch`属性，在这个例子中，假设我们关注的是`$route.path`：

export default {
  setup() {
    const url = ref(window.location.pathname); // 使用ref包装url以便于双向数据绑定

    watch(() => $route.path, (newPath) => {
      if (newPath !== url.value) {
        // 当路径改变时，这里处理新的url，比如更新组件状态、调用API等
        console.log('URL changed:', newPath);
        // 更新url值，如需触发视图更新
        url.value = newPath;
      }
    });

    return { url };
  },
};

2. 在模板中使用`{{ url }}`显示当前路径。