watch( val,(newVal,oldval)=>{},) 这个格式,深度监听怎么写

对于深度监听，可以使用递归函数来实现。具体实现方式如下：

function deepWatch(obj, callback) {
Object.keys(obj).forEach(key => {
let val = obj[key];
if (typeof val === 'object') {
deepWatch(val, callback);
}
Object.defineProperty(obj, key, {
get() {
return val;
},
set(newVal) {
callback(newVal, val);
val = newVal;
}
});
});
}

使用方法如下：

let obj = {
a: {
b: {
c: 1
}
}
};

deepWatch(obj, (newVal, oldVal) => {
console.log(`newVal: ${newVal}, oldVal: ${oldVal}`);
});

obj.a.b.c = 2; // 输出 newVal: 2, oldVal: 1

相关问题

handle_select_car_name(val) { fetchDataCftDetail({ 'car_name': val, 'order_by_list_from_ui': ['-id'] }).then(({ data }) => { // this.add_problem_form.problem_detail.project_phase = data[0]['project_phase'] Vue.set(this.add_problem_form.problem_detail,'project_phase',data[0]['project_phase']) console.log(data) console.log(data[0]['project_phase']) }) } 为何无法改变表单中project_phase的值

根据提供的代码，您想要通过改变下拉框的值来更新表单中的project_phase值。从代码中可以看出，您已经使用了Vue.set方法来更新表单中的project_phase值，但是仍然无法改变表单中的project_phase值。这可能是由于以下原因：

1. 表单中的project_phase属性没有正确绑定到Vue实例的data中。

请确保表单中的project_phase属性已经在Vue实例的data中正确声明和绑定。例如：

data() {
  return {
    add_problem_form: {
      problem_detail: {
        project_phase: ''
      }
    }
  }
}

并且在表单中正确绑定：

<el-form :model="add_problem_form">
  <el-form-item label="阶段">
    <el-select v-model="add_problem_form.problem_detail.project_phase" @change="handle_select_car_name">
      <!-- 下拉框选项 -->
    </el-select>
  </el-form-item>
</el-form>

2. fetchDataCftDetail方法没有正确获取到数据或者没有返回正确的数据格式。

请检查fetchDataCftDetail方法是否正确获取到数据，并且返回的数据格式是否正确。可以在控制台打印出返回的data，检查其中是否包含正确的project_phase值。

如果以上两个问题都没有解决表单中的project_phase值无法更新的问题，可以尝试在Vue实例中使用watch属性监听add_problem_form对象中project_phase属性的变化，例如：

watch: {
  'add_problem_form.problem_detail.project_phase': function(newVal, oldVal) {
    console.log(newVal, oldVal) // 检查属性值是否更新成功
  }
}

这样，当表单中的project_phase属性发生变化时，会触发watch方法，并在控制台打印出新值和旧值，以检查属性值是否更新成功。

vue2 watch监听sessionstorage 监听不到

根据提供的代码，可能是因为watch监听的是sessionStorage对象本身，而不是sessionStorage中某个具体的key值。因此，当sessionStorage中的某个key值发生变化时，watch监听不到。解决方法是在sessionStorage中的某个key值发生变化时，手动触发一个事件，让watch监听到这个事件，从而实现监听sessionStorage中某个key值的变化。

代码实现如下：

// 监听sessionStorage中某个key值的变化
watch: {
  '$store.state.sessionStorageKey': function (newVal, oldVal) {
    console.log('sessionStorageKey changed:', newVal, oldVal)
  }
},
// 手动触发事件
methods: {
  setSessionStorage: function (key, val) {
    sessionStorage.setItem(key, val)
    this.$store.state.sessionStorageKey = key + Math.random()
  }
}