vue关于事件的对比

相对于dom元素上的频繁添加和取消监听事件，我们把要监听的函数放入到对象中去，更新的时候只更新对象上的值就可以

function createInvoker(initialValue) {
  const invoker = (e) => invoker.value(e);
  invoker.value = initialValue; // 后续更新的时候 只需要更新invoker的value属性
  return invoker;
  //invoker就是调取自身属性value的函数
}
// 函数 更新 成新的函数了 直接更改.value即可
export function patchEvent(el, key, nextValue) {
  // vue event invoker
  const invokers = el._vei || (el._vei = {});
  // 如果nextValue 为空，而且有绑定过事件，要移除
  //click
  const name = key.slice(2).toLowerCase();
  const exisitingInvoker = invokers[name];
  if (nextValue && exisitingInvoker) {
    // 更新事件(监听事件发生了变化，直接更新对象上的值就行)
    exisitingInvoker.value = nextValue;
  } else {
    if (nextValue) {
      // 缓存创建的invoker，
      const invoker = (invokers[name] = createInvoker(nextValue));
      el.addEventListener(name, invoker);
    } else if (exisitingInvoker) {
      el.removeEventListener(name, exisitingInvoker);
      invokers[name] = null;
    }
  }
}

  invoker.value = initialValue; 
  return invoker;
}
// 函数 更新 成新的函数了 直接更改.value即可
export function patchEvent(el, key, nextValue) {
  // vue event invoker
  const invokers = el._vei || (el._vei = {});
  // 如果nextValue 为空，而且有绑定过事件，要移除
  //click
  const name = key.slice(2).toLowerCase();
  const exisitingInvoker = invokers[name];
  if (nextValue && exisitingInvoker) {
    // 更新事件
    exisitingInvoker.value = nextValue;
  } else {
    if (nextValue) {
      // 缓存创建的invoker
      const invoker = (invokers[name] = createInvoker(nextValue));
      el.addEventListener(name, invoker);
    } else if (exisitingInvoker) {
      el.removeEventListener(name, exisitingInvoker);
      invokers[name] = null;
    }
  }
}