React和Vue的响应式原理对比

网上关于这个的资料不少，但很多都只讲原理不给代码。这里补一个完整的可运行示例，亲测有效。

先搞清楚原理

响应式的底层原理涉及事件处理。用代码演示比画图更直观：

function createStore(reducer, initialState) {
  let state = initialState;
  let listeners = [];
  function getState() { return state; }
  function dispatch(action) {
    state = reducer(state, action);
    listeners.forEach(l => l(state));
  }
  function subscribe(listener) {
    listeners.push(listener);
    return () => { listeners = listeners.filter(l => l !== listener); };
  }
  return { getState, dispatch, subscribe };
}

function counterReducer(state = { count: 0 }, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    case 'DECREMENT': return { count: state.count - 1 };
    case 'SET': return { count: action.payload };
    default: return state;
  }
}

const store = createStore(counterReducer);
store.subscribe(s => console.log('State:', s));
store.dispatch({ type: 'INCREMENT' });

实际怎么用

实际用的时候有几个注意点。首先是配置问题，不同环境参数可能不一样。其次是性能，数据量大的时候要注意事件处理。看这段实际运行的代码：

class SearchBox {
  constructor(container, options = {}) {
    this.container = container;
    this.debounceMs = options.debounceMs || 300;
    this.onChange = options.onChange || (() => {});
    this.value = '';
    this.init();
  }

  init() {
    this.container.innerHTML = '<input type="text" placeholder="请输入..." />';
    const input = this.container.querySelector('input');
    let timer = null;
    input.addEventListener('click', (e) => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        this.value = e.target.value;
        this.onChange(this.value);
      }, this.debounceMs);
    });
  }

  getValue() { return this.value; }
  setValue(val) { this.value = val; this.container.querySelector('input').value = val; }
}

进阶一点的用法

有些场景下响应式的常规写法不够用，需要做事件处理。这个改动涉及的地方不多，但要注意顺序：

容易踩的坑

说几个容易踩的坑。第一个是事件处理的问题，很多人在这上面栽过跟头。第二个是版本兼容性，不同版本行为可能不一样。第三个是边界情况，空值和异常输入要处理好。

写在最后

总结一下，响应式的关键在于DOM操作与事件响应。掌握了这个，其他用法都是在这个基础上扩展。建议多写几个小demo练手，光看不动手容易忘。