vue的watch的this指向undefined

在Vue中，当使用箭头函数或者在watch选项中使用字符串形式的处理函数时，this指向会变为undefined。这是因为箭头函数没有自己的this，会继承父级作用域的this，而在watch选项中使用字符串形式的处理函数时，Vue会将其转换为函数，并将其作为内部函数的参数传递，导致this指向丢失。

为了解决这个问题，可以使用函数形式的处理函数，或者在箭头函数中使用外部的this变量。例如：

watch: {
  value: function(newVal, oldVal) {
    // 在函数中使用this指向Vue实例
    console.log(this);
  }
}

或者

watch: {
  value: (newVal, oldVal) => {
    // 在箭头函数中使用外部的this变量
    console.log(this);
  }
}

相关问题

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---')
  }
}

vue.runtime.esm.js:619 [Vue warn]: Error in callback for watcher "value": "TypeError: Cannot read properties of null (reading 'level')"

根据引用，这个警告是由于尝试读取一个空值的属性所引起的。在这种情况下，'level'属性是null，无法读取其属性值，从而导致出现了TypeError的错误。

根据引用，可以通过在返回值后添加空对象 || {} 来简化数据。这样，在初始状态为空的情况下，空对象的属性值为undefined，而不会触发警告。

根据引用，在watch侦听器中，如果使用箭头函数作为回调函数，需要注意箭头函数中的this指向的不再是vue实例，而是绑定了上下文对象。因此，在箭头函数中引用的this不再是vue实例，可能导致错误的发生。

因此，出现了"vue.runtime.esm.js:619 [Vue warn]: Error in callback for watcher 'value': 'TypeError: Cannot read properties of null (reading 'level')'"的错误可能是因为在watch侦听器中使用了箭头函数，并在箭头函数中引用了this，而this指向null，导致无法读取'level'属性的值。