当前位置：首页 > JavaScript

js实现watch

2026-02-01 04:59:46JavaScript

实现 watch 功能的方法

在 JavaScript 中，watch 功能通常用于监听对象属性的变化。以下是几种实现方式：

使用 Proxy 实现

Proxy 可以拦截对象的操作，适合现代浏览器环境：

function watch(obj, prop, callback) {
  return new Proxy(obj, {
    set(target, key, value) {
      if (key === prop) {
        callback(value, target[key]);
      }
      target[key] = value;
      return true;
    }
  });
}

const obj = { count: 0 };
const watchedObj = watch(obj, 'count', (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`);
});

watchedObj.count = 1; // 输出: Changed from 0 to 1

使用 Object.defineProperty

兼容性更好的传统方法：

function watch(obj, prop, callback) {
  let value = obj[prop];
  Object.defineProperty(obj, prop, {
    get() {
      return value;
    },
    set(newVal) {
      const oldVal = value;
      value = newVal;
      callback(newVal, oldVal);
    }
  });
}

const obj = { count: 0 };
watch(obj, 'count', (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`);
});

obj.count = 1; // 输出: Changed from 0 to 1

使用第三方库

Vue 等框架提供了响应式系统：

// Vue 3 示例
import { ref, watch } from 'vue';

const count = ref(0);
watch(count, (newVal, oldVal) => {
  console.log(`Changed from ${oldVal} to ${newVal}`);
});

count.value = 1; // 输出: Changed from 0 to 1

深度监听实现

递归监听嵌套对象：

function deepWatch(obj, callback) {
  return new Proxy(obj, {
    set(target, key, value) {
      const oldVal = target[key];
      if (typeof value === 'object' && value !== null) {
        value = deepWatch(value, callback);
      }
      target[key] = value;
      callback(key, value, oldVal);
      return true;
    }
  });
}

const obj = deepWatch({ user: { name: 'Alice' } }, (key, newVal, oldVal) => {
  console.log(`${key} changed from`, oldVal, 'to', newVal);
});

obj.user.name = 'Bob'; // 输出: name changed from Alice to Bob

这些方法提供了不同场景下的属性监听解决方案，可根据项目需求选择合适的方式。

js实现watch