vue怎么实现数据检测
Vue 数据检测的实现方式
Vue 通过响应式系统实现数据检测，核心是利用 Object.defineProperty（Vue 2）或 Proxy（Vue 3）对数据进行劫持，结合发布-订阅模式实现依赖追踪和更新。
Vue 2 的实现
数据劫持
// 简化版数据劫持示例
function defineReactive(obj, key, val) {
Object.defineProperty(obj, key, {
get() {
console.log('读取数据');
return val;
},
set(newVal) {
if (newVal === val) return;
console.log('更新数据');
val = newVal;
// 触发视图更新
}
});
}依赖收集
- 每个组件实例对应一个
Watcher实例 - 在
getter中收集依赖（Dep.target指向当前Watcher） - 在
setter中通知所有依赖进行更新
Vue 3 的实现
Proxy 代理
// 简化版 Proxy 实现
const reactive = (target) => {
return new Proxy(target, {
get(target, key, receiver) {
track(target, key); // 依赖收集
return Reflect.get(target, key, receiver);
},
set(target, key, value, receiver) {
Reflect.set(target, key, value, receiver);
trigger(target, key); // 触发更新
return true;
}
});
};数组的特殊处理
Vue 2 中通过重写数组方法实现响应式：
const arrayProto = Array.prototype;
const arrayMethods = Object.create(arrayProto);
['push', 'pop', 'shift', 'unshift'].forEach(method => {
const original = arrayProto[method];
arrayMethods[method] = function(...args) {
const result = original.apply(this, args);
// 通知更新
return result;
};
});性能优化技巧
- 对于不需要响应式的数据，使用
Object.freeze() - 合理使用
v-once指令减少不必要的检测 - 大数据量时考虑分页或虚拟滚动
调试响应式数据
- 使用
Vue.set/this.$set添加新属性 - 通过
vm.$watch手动创建侦听器 - 开发环境下可通过
Vue.config.performance开启性能追踪
