vue watch监听函数

vue中的watch监听函数用于观察和监听页面上的vue实例中的数据变化。当需要在数据变化时执行异步操作或高性能消耗的操作时，watch是最佳选择。在使用watch监听函数时，可以监听字符串、监听对象和监听路由。

监听字符串的代码示例：

watch: {
  dataPropertyName: function(newValue, oldValue) {
    // 在数据变化时执行的操作
  }
}

监听对象时，需要添加`deep: true`，才能深入底层实时监听对象的变化。如果没有添加，对象是无法被监听到变化的。

watch: {
  dataPropertyName: {
    handler: function(newValue, oldValue) {
      // 在数据变化时执行的操作
    },
    deep: true
  }
}

监听路由时，可以使用`$route`来监听当前路由的变化。

watch: {
  '$route': {
    handler: function(newValue, oldValue) {
      // 在路由变化时执行的操作
    },
    deep: true,
    immediate: true
  }
}

相关问题

vue watch监听箭头函数

在Vue3中，如果你使用箭头函数来定义watch监听函数，会出现this指向错误的问题，因为箭头函数里面的this指向上下文中的this，但是watch里面后面的箭头函数没有上下文调用，所以就出现了undefined。正确的做法是使用普通的函数定义watch监听函数。下面是一个示例代码：

watch: {
  'form.psiType': function(newV, oldV) {
    console.log('newV,oldV---', newV, oldV)
    if (newV === 'OPRF') {
      console.log('done---', this.form.remoteDataSetId)
      this.form.remoteDataSetId.forEach(item => {
        item.columnIn = []
      })
    }
    console.log('done---')
  }
}

vue2watch监听函数

Vue2中的watch监听函数可以通过使用$watch方法来手动添加。$watch方法接受两个参数，第一个参数是要监听的数据的名称，第二个参数是要执行的回调函数。

例如，在组件创建时，我们可以通过以下方式添加一个watch监听器：

this.stopWatch = this.$watch('dataName', callback);

其中，`dataName`是要监听的数据的名称，`callback`是要执行的回调函数。

要取消这个监听器，只需要调用保存监听器的变量即可：

this.stopWatch();

这样就可以取消对`dataName`的监听了。