改成vue2的watch怎么写

在Vue 2中，您可以使用`$watch`方法来实现类似的效果。以下是如何使用`$watch`来替代Vue 3中的`watch`函数：

this.$watch(
  function() {
    return this.pageData;
  },
  function() {
    this.queryApp();
  },
  {
    deep: true,
    immediate: true
  }
);

在Vue 2中，`this.$watch`接受三个参数：要侦听的属性、回调函数和选项对象。请确保在组件的上下文中使用`this.$watch`。

相关问题

vue3 watch中调用方法报错

在Vue3中，当在watch中使用箭头函数时，会导致this无法访问到。这是因为箭头函数没有自己的this，它会继承外部作用域的this。所以在watch中使用箭头函数时，this指向的是外部作用域，而不是Vue实例。为了解决这个问题，你需要将箭头函数改成普通的函数形式。例如，将watch中的箭头函数改成function形式，如下所示：

watch: {
  inputValue: function(newValue) {
    console.log(newValue);
    this.getInfo();
  }
},

这样就可以正确地访问到this，并调用相应的方法了。[1][2]

另外，如果你想了解更多关于watch的使用方式，可以参考Vue官方文档中关于watch的部分。[2]

onBeforeRouteUpdate((to) => { console.log(to.query.id); axios.get(/hws/square/basic/facade?squareId=${to.query.id}).then(res => { console.log(res.data.result); list.splice(0) list.push(res.data.result) }) }); 改成vue3中watch监听的写法

在Vue 3中，我们可以使用`watchEffect`或`watch`函数来监听路由变化。这里是使用`watch`函数的示例代码：

import { watch } from 'vue'

export default {
  setup() {
    const list = reactive([])

    watch(
      () => $route.query.id,
      (id) => {
        axios.get(`/hws/square/basic/facade?squareId=${id}`).then(res => {
          list.splice(0)
          list.push(res.data.result)
        })
      },
      { immediate: true }
    )

    return {
      list
    }
  }
}

在`setup`函数中，我们使用`watch`函数来监听`$route.query.id`的变化。`$route`是Vue Router提供的一个全局变量，用于访问当前路由信息。当`$route.query.id`发生变化时，`watch`函数的回调函数会被触发，我们在回调函数中发送请求并更新`list`数组。`immediate`选项表示在组件创建时立即执行一次回调函数，以便初始化数据。

需要注意的是，使用`watch`函数需要导入Vue的`watch`函数。同时，在Vue 3中，我们还需要导入`reactive`函数来创建响应式数据对象。