Vue.js使いだして２年くらい経ったけど、使ったことないAPIを使ってみる「グローバル設定」(1/2)

## 背景
把握してないAPIを学べばもっと適切に書ける場面ってあるんじゃ？と思い、学ぶことにした。

今回は[グローバル設定](https://jp.vuejs.org/v2/api/index.html#%E3%82%B0%E3%83%AD%E3%83%BC%E3%83%90%E3%83%AB%E8%A8%AD%E5%AE%9A)の使い方を学ぶことにする。

~~とりあえず使ったこと無いものをリストアップしようとしたけど、全て使ったとことなかったので意味なかった。~~

## グローバル設定API

### [silent](https://jp.vuejs.org/v2/api/index.html#silent)

> すべての Vue のログと警告を抑制します。

ってあるけど、ログと警告ってどれ？

#### 警告

```vue
<div @click="hoge"></div>
```
といった感じで存在しないメソッド`hoge`を指定すると
![スクリーンショット 2018-12-02 1.27.10.png](https://qiita-image-store.s3.amazonaws.com/0/19909/b9ac06cf-3e61-a43c-9d8d-abf25f1d70ee.png)

こんな感じで警告が表示される。
そんな場合に、

```js
Vue.config.silent = true;
```
を設定すると警告が表示されなくなる。

### [optionMergeStrategies](https://jp.vuejs.org/v2/api/index.html#optionMergeStrategies)

なんのことかさっぱりわからない、、、[ミックスインの基本](https://jp.vuejs.org/v2/guide/mixins.html#%E5%9F%BA%E6%9C%AC)と[オプションのマージ](https://jp.vuejs.org/v2/guide/mixins.html#%E3%82%AA%E3%83%97%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E3%83%9E%E3%83%BC%E3%82%B8)をまず理解しないと先に進めなさそう。

* オプションのマージが起こるのはミックスインや`Vue.extend`を使ったとき
* オプションとはコンポーネントオプションのことで`data`とか`methods`のことである
* ミックスインとコンポーネントで重複した場合のルールがある
    * `data`のときはコンポーネントが優先される
    * `created`などのフック関数は、ミックスインのフック関数が呼ばれてから、コンポーネントのフック関数が呼ばれる

```js
Vue.config.optionMergeStrategies._my_option = function (parent, child) {
  if (!parent) return child
  if (!child) return parent

  return parent + child // parent = 1, child = 10
}
```

```js:mixins/index.js
export default {
  _my_option: 1
}
```

としたときに、

```vue:App.vue
<template>
  <div id="app">
    {{ myOption }}
  </div>
</template>

<script>
import mixin from './mixins'

export default {
  name: 'App',
  mixins: [mixin],
  data () {
    return {
      myOption: this.$options._my_option
    }
  },
  _my_option: 10
}
</script>
```

`myOption`は`11`となる。
`optionMergeStrategies`を設定しない場合、`10`となる。
`_my_option`が重複してるのでコンポーネントの値が優先されるので。
コンポーネントの`_my_option`を消すと、`myOption`はもちろん`1`となる。

具体的な利用シーンは思い浮かばなかったが、、、

### [devtools](https://jp.vuejs.org/v2/api/#devtools)

> [vue-devtools](https://github.com/vuejs/vue-devtools) インスペクションを許可するかどうか設定します

と書いてある通り、

```js
Vue.config.devtools = false
```
とすると
![スクリーンショット 2018-12-02 12.53.13.png](https://qiita-image-store.s3.amazonaws.com/0/19909/e65eedc2-68b5-9f09-1c4b-75cb7ac44486.png)
右端の`Vue`が消えて、インスペクションが見られなくなります。

### [errorHandler](https://jp.vuejs.org/v2/api/#errorHandler)

> コンポーネントの描画関数とウォッチャにおいて未捕獲のエラーに対してハンドラを割り当てます。

とあるので、ウォッチャでエラーを吐いてみる。

```js
const vm = new Vue({
  data: {
    message: ''
  },
  watch: {
    message (val) {
      tmp = val
    }
  }
})
vm.message = 'hoge';
```

とすると、以下の設定で

```js
Vue.config.errorHandler = (err, vm, info) => {
  console.error(err)
  console.log(vm)
  console.log(info)
};
```
以下のような出力となり、ちゃんとハンドリングできてる。

![スクリーンショット 2018-12-02 15.36.03.png](https://qiita-image-store.s3.amazonaws.com/0/19909/7b633e12-9428-0387-d1cd-87ff84c587bc.png)

### [warnHandler](https://jp.vuejs.org/v2/api/#warnHandler)

```vue:Main.vue

<template>
  <div>main</div>
</template>

<script>
export default {
  name: 'main'
}
</script>
```
こちらのコンポーネントを使うと

```js
Vue.config.warnHandler = (msg, vm, trace) => {
  console.warn(msg);
  console.log(vm);
  console.log(trace);
};
```
こちらの出力が
![スクリーンショット 2018-12-02 22.25.59.png](https://qiita-image-store.s3.amazonaws.com/0/19909/0903f6a7-67ac-9d8c-0b68-d1d153eb45f2.png)
となる。

長くなったので一旦ここで終わり。