vue3如何监听reactive对象是哪个属性发生的变化

在 Vue 3 中,如果你想监听 reactive 对象中的某个属性发生的变化,你可以使用 watch 函数进行监听。watch 函数允许你观察 reactive 对象的某个属性或者整个对象,并在变化时执行相应的操作。

1. 监听 reactive 对象的某个属性

如果你只想监听 reactive 对象的某个特定属性,可以直接在 watch 中传入该属性。

javascript 复制代码
import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// 监听 name 属性的变化
watch(() => state.name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

2. 监听整个 reactive 对象并检查是哪一个属性发生了变化

如果你需要监听整个 reactive 对象,并确定到底是哪个属性发生了变化,可以通过对整个对象进行深度监听 (deep: true),然后手动检查哪个属性发生了变化。

javascript 复制代码
import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// 监听整个对象的变化
watch(
  state,
  (newValue, oldValue) => {
    for (const key in newValue) {
      if (newValue[key] !== oldValue[key]) {
        console.log(`${key} changed from ${oldValue[key]} to ${newValue[key]}`);
      }
    }
  },
  { deep: true } // 深度监听
);

3. 监听多个属性

如果你需要监听多个特定的属性,你可以使用多个 watch,或者通过组合使用 computed 进行监听。

javascript 复制代码
import { reactive, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

// 监听 name 和 age 属性的变化
watch(
  () => [state.name, state.age],
  ([newName, newAge], [oldName, oldAge]) => {
    if (newName !== oldName) {
      console.log(`Name changed from ${oldName} to ${newName}`);
    }
    if (newAge !== oldAge) {
      console.log(`Age changed from ${oldAge} to ${newAge}`);
    }
  }
);

4. 使用 toRefs 进行属性监听

你可以将 reactive 对象的属性转换为 ref,然后使用 watch 监听这些 ref

javascript 复制代码
import { reactive, toRefs, watch } from 'vue';

const state = reactive({
  name: 'John',
  age: 30,
  location: 'New York',
});

const { name, age } = toRefs(state);

// 监听 name 属性的变化
watch(name, (newValue, oldValue) => {
  console.log(`Name changed from ${oldValue} to ${newValue}`);
});

// 监听 age 属性的变化
watch(age, (newValue, oldValue) => {
  console.log(`Age changed from ${oldValue} to ${newValue}`);
});

总结

  • 监听单个属性 :使用 watch(() => state.name, ...) 监听特定属性的变化。
  • 监听整个对象 :使用 watch(state, ...) 并结合 deep: true 深度监听整个对象,并手动检查哪些属性发生了变化。
  • 监听多个属性 :可以通过数组或组合 computed 来监听多个属性的变化。
  • 使用 toRefs :将 reactive 对象的属性转换为 ref,然后分别进行监听。

这些方法可以帮助你灵活地监听 reactive 对象中的属性变化,根据实际需求选择合适的方式。

相关推荐
活宝小娜27 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点29 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow30 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o32 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
开心工作室_kaic1 小时前
ssm161基于web的资源共享平台的共享与开发+jsp(论文+源码)_kaic
java·开发语言·前端
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
沉默璇年3 小时前
react中useMemo的使用场景
前端·react.js·前端框架
yqcoder3 小时前
reactflow 中 useNodesState 模块作用
开发语言·前端·javascript
2401_882727573 小时前
BY组态-低代码web可视化组件
前端·后端·物联网·低代码·数学建模·前端框架
SoaringHeart3 小时前
Flutter进阶:基于 MLKit 的 OCR 文字识别
前端·flutter