Vue如何在watch回调函数中修改数据状态？

在Vue的watch回调函数里，this指向当前组件的实例对象，你可以直接通过this.数据属性名来修改data中定义的任何状态。

基于你提供的代码，我们可以通过实际示例展示如何操作：

<template>
  <div class="hello">
    <h1>{{ msg }}</h1>
    <input v-model="inputVal" placeholder="edit me" />
    <p>{{ inputVal }}</p>
    <p>{{ changeLog }}</p> <!-- 新增：展示状态变更日志 -->
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      inputVal: '22',
      changeLog: '' // 新增一个数据状态用于展示变更信息
    }
  },

  watch: {
    inputVal: function(val, oldVal) {
      console.log('inputVal changed');
      console.log(oldVal);
      console.log(val);
      
      // 修改changeLog状态，同步展示输入值的变更记录
      this.changeLog = `输入值从「${oldVal}」更新为「${val}」`;

      // 示例：当输入长度超过5时，自动截断inputVal
      // 注意：修改当前监听的属性时必须加条件判断，否则会触发无限循环（修改→触发watch→再修改→再触发...）
      if (val.length > 5) {
        this.inputVal = val.slice(0, 5);
      }
    }
  }
}
</script>

关键要点：

• 回调内的this直接绑定组件实例，可直接访问、修改所有data中定义的属性。
• 若要修改当前正在监听的属性，必须添加条件限制修改逻辑，避免触发无限循环。

内容的提问来源于stack exchange，提问作者TKoL