vant源码阅读

类弹窗组件使用

类弹窗组件的调用方式有两种，一是直接引入组件，二是命令式的调用。后者会创建一个新的vue实例并挂载在一个（符合vue实例挂载条件的）元素上。

export function mountComponent(RootComponent: Component) {
	// 从vue中引入的createApp
  const app = createApp(RootComponent);
  const root = document.createElement('div');

  document.body.appendChild(root);

  return {
    instance: app.mount(root),
    unmount() {
      app.unmount();
      document.body.removeChild(root);
    },
  };
}

Event/cancelable

export function preventDefault(event: Event, isStopPropagation?: boolean) {
  /* istanbul ignore else */
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    event.preventDefault();
  }

  if (isStopPropagation) {
    stopPropagation(event);
  }
}

event.cancelable 被提出之后，可以用这个来判断是否可以取消事件，滚动事件只能在第一次取消。non-passive wheel listeners are a problem for scroll performance. 非消极的事件监听器会导致滚动出现性能问题。这是由于在触屏设备上，touch 事件 和 scroll 事件等，会调用preventDefault阻止默认行为导致阻塞。{passive: true} 是提出来让页面的滚动无需等待javascript立即执行，减少惊异的副作用。

MDN 上有关于event.cancelable 的例子：

function preventScrollWheel(event) {
	// 判断是否等于boolean是因为兼容问题
  if (typeof event.cancelable !== 'boolean' || event.cancelable) {
    // The event can be canceled, so we do so.
    event.preventDefault();
  } else {
    // The event cannot be canceled, so it is not safe
    // to call preventDefault() on it.
    console.warn(`The following event couldn't be canceled:`);
    console.dir(event);
  }
}

document.addEventListener('wheel', preventScrollWheel);

https://github.com/WICG/interventions/issues/33

https://github.com/WICG/EventListenerOptions/blob/gh-pages/explainer.md

https://developer.mozilla.org/en-US/docs/Web/API/Event/cancelable#example