vue3监听对象数据变化

在 Vue3 中，可以使用 reactive 函数将一个普通对象转换为响应式对象，然后使用 watch 函数监听响应式对象的变化。具体实现如下：
import { reactive, watch } from 'vue'

const obj = reactive({
name: '张三',
age: 18
})

watch(() => obj.name, (newVal, oldVal) => {
console.log(`name 从 ${oldVal} 变成了 ${newVal}`)
})
登录后复制
在上面的代码中，我们使用 reactive 函数将 obj 对象转换为响应式对象，然后使用 watch 函数监听 obj.name 属性的变化。当 obj.name 属性发生变化时，会触发回调函数并输出变化前后的值。

相关问题

vue监听对象数据变化

可以使用Vue的watch属性来监听对象数据的变化。具体实现方法如下：
watch: {
obj: {
handler: function (newVal, oldVal) {
console.log('obj changed')
},
deep: true
}
}
登录后复制
其中，obj是要监听的对象，handler是当obj发生变化时要执行的函数，deep为true表示深度监听，即当obj内部的属性发生变化时也会触发handler函数。

vue2监听对象和vue3监听对象数组

在 Vue.js 中，监听数据变化有两方面的区别，一个是 Vue 2 版本，另一个是 Vue 3 版本。
Vue 2：
Vue 2 使用 vm.$watch 或者 v-on 指令来监听对象或数组的变化。例如，对于对象：
let obj = { prop: 'initial' };
var vm = new Vue({
data: {
myObj: obj
},
watch: {
'myObj.prop': function(newVal, oldVal) {
console.log('Prop changed:', newVal);
}
}
});
登录后复制
这里通过 watch 对象属性的键路径进行监听。
对于数组：
let arr = ['item1', 'item2'];
vm.$watch('myArr', (newVal, oldVal) => {
console.log('Array changed:', newVal);
}, { deep: true }); // 如果需要深度监听，传入 `{ deep: true }`
登录后复制
$watch 需要传入监听的目标以及回调函数。
Vue 3：
Vue 3 引入了响应式系统，通过 ref、 reactive 等创建的数据会自动跟踪变化。监听对象可以这样做：
import { ref } from 'vue';
const obj = ref({ prop: 'initial' });
// 直接访问值变化就会触发更新
obj.value.prop = 'new value';

// 或者使用 computed 和 watch
const myObj = obj.value;
watch(myObj, (val) => {
console.log('Prop changed:', val);
});
登录后复制
对于数组，同样推荐使用 reactive：
const arr = reactive(['item1', 'item2']);
arr.push('item3'); // 自动跟踪变化
登录后复制
watch 可以直接作用于数组或响应式的对象上，不需要设置 deep 参数。