vue监听对象内的变化

在Vue.js中，监听对象内部值的变化通常使用的是watch选项或者Computed特性，因为Vue的核心思想是响应式数据绑定，而不是主动监听。

使用watch:
可以直接在Vue实例上或者单个组件的data对象上设置一个watch对象，它允许你在某个数据改变时执行特定函数。例如：
data() {
return {
obj: { key: 'value' }
}
},
watch: {
obj: {
handler(newValue, oldValue) {
console.log('obj has changed:', newValue, 'from', oldValue);
},
deep: true, // 如果对象内部有其他对象或数组，需开启deep检测
}
}
登录后复制

使用Computed:
如果你想基于一些计算属性监控依赖的变化，可以定义一个computed属性，当它的依赖项改变时，这个属性会自动更新并触发视图更新。例如：
computed: {
watchedObj: function () {
return this.obj.key; // 监听obj.key的变化
}
},
登录后复制
当obj.key发生改变时，watchedObj也将同步更新。

对于复杂场景或深级嵌套的对象，推荐使用deep: true或Vuex等状态管理工具，以确保变更能够被准确地捕获。