Vue.js를 사용한 지 2년 정도 지났습니다. 사용하지 않은 API'전역 설정'(2/2)을 사용해 보십시오.

Vue.js를 사용한 지 2년 정도 지났습니다. 사용하지 않은 API'전역 설정'(1/2)을 사용해 보십시오.의 계속

ignoredElements

<template>
  <div id="app">
    <x-tabs>
      <x-tab>タブ1</x-tab>
    </x-tabs>
  </div>
</template>

위에서 말한 바와 같이 Web Components의Custom Elements를 사용하여 독립된 요소를 정의한 경우

이런 경고를 출력합니다.
그러므로

Vue.config.ignoredElements = [
  'x-tabs',
  'x-tab'
];

경고는 출력되지 않습니다.
이렇게 하면 Web Components도 안심하고 사용할 수 있다.

keyCodes

키 수식자, 특정한 버튼 코드에만 반응하는 관건적인 이벤트를 간단하게 실현할 수 있는 메커니즘이 있다.enter와 tab 등 대표적인 별명은 준비돼 있지만 버튼 코드에 대한 준비는 거의 없다.
따라서 keyCodes를 사용하면 별명을 설정할 수 있다.

Vue.config.keyCodes = {
  v: 86,
  f1: 112,
  // キャメルケースは動作しません
  mediaPlayPause: 179,
  // 代わりに、二重引用符でケバブケースを使用することができます
  "media-play-pause": 179,
  up: [38, 87]
}

이렇게 설정하면...

<input type="text" @keyup.v="submit">
<input type="text" @keyup.f1="submit">
<input type="text" @keyup.media-play-pause="submit">
<input type="text" @keyup.up="submit">

이렇게 쓰면 돼요.

performance

Vue.config.performance = true;

devtool의Performance패널은 설정하지 않았을 때와 비교해 무엇이 다른지 잘 모르겠다.

productionTip

프로덕션 팁

이것이 바로

Vue.config.productionTip = false;

안 뜨면 안 뜨는데.