vue实现监测数据变化
监测数据变化的基本方法
在Vue中，数据变化监测主要依赖于响应式系统。Vue通过Object.defineProperty或ES6的Proxy（Vue 3）来实现数据的响应式绑定。以下是几种常见的监测数据变化的方式：
watch选项
new Vue({
data: {
message: 'Hello'
},
watch: {
message(newVal, oldVal) {
console.log('Message changed from', oldVal, 'to', newVal);
}
}
});$watch方法
const vm = new Vue({
data: {
count: 0
}
});
vm.$watch('count', (newVal, oldVal) => {
console.log('Count changed from', oldVal, 'to', newVal);
});深度监测对象变化
当需要监测对象内部属性的变化时，可以使用deep选项：
watch: {
user: {
handler(newVal, oldVal) {
console.log('User object changed');
},
deep: true
}
}立即触发回调
如果需要立即执行一次回调函数，可以使用immediate选项：
watch: {
value: {
handler(newVal, oldVal) {
console.log('Value is', newVal);
},
immediate: true
}
}计算属性监测
计算属性会自动追踪依赖，当依赖变化时会重新计算：
computed: {
reversedMessage() {
return this.message.split('').reverse().join('');
}
}Vue 3的响应式API
在Vue 3中，可以使用ref和reactive创建响应式数据，并通过watch和watchEffect来监测变化：
import { ref, watch } from 'vue';
const count = ref(0);
watch(count, (newVal, oldVal) => {
console.log('Count changed from', oldVal, 'to', newVal);
});监测数组变化
Vue对数组的变异方法（如push、pop、shift等）进行了封装，可以直接监测这些操作带来的变化：
data: {
items: []
},
watch: {
items(newVal) {
console.log('Array changed:', newVal);
}
}自定义变更检测
对于需要更精细控制的情况，可以使用Vue.set或vm.$set来确保属性的响应性：
Vue.set(vm.someObject, 'newProperty', 'value');
// 或
vm.$set(vm.someObject, 'newProperty', 'value');性能考虑
频繁的数据变化监测可能影响性能。可以通过debounce或throttle来优化高频变化的处理：
import _ from 'lodash';
watch: {
searchQuery: _.debounce(function(newVal) {
this.fetchResults(newVal);
}, 500)
}
