Vueが使用するいくつかの小さなテクニック

We can’t change history, but we can change the future. --どこで見たか忘れた
に手を触れる
最近ずっとVueを使って开発して、期间はそんなにまじめに総括をしていないで、本文もただ自分の印象の比較的に深い点に対して1、2を列挙します.
Router key
Vueは、/pageなどの同じコンポーネントを多重化します.id=1 =>/page?id=2のようなジャンプの場合、コンポーネントはcreated、mountedなどのフック関数を実行しません.この場合、一般的な解決策は以下の通りです.
watch

watch: {
  $route(to, from) {
    // XXXX
  }
}

router-viewにunique keyをバインドする

// $route.fullPath:        URL，        hash      
<router-view :key="$route.fullPath"></router-view>

原理は公式サイトのkeyの定義を見ることができます:https://cn.vuejs.org/v2/api/index.html#keyもちろん、似たようなシーンがなければ使用することをお勧めしません.結局、レンダリングするたびにパフォーマンスを失う代価がかかります.
$attrs
この属性は使う人が多くなくて、知っている人も多くないかもしれませんが、私もカスタムinputコンポーネントを実現したとき、Googleが着いたのです.公式解釈:親役割ドメインでpropとして認識されない(取得された)特性バインド(classとstyleを除く)が含まれています.1つのコンポーネントがpropを宣言していない場合、ここにはすべての親ドメインのバインド(classおよびstyleを除く)が含まれ、v-bind=「$attrs」で内部コンポーネントに転送できます.高レベルのコンポーネントを作成する場合に便利です.例:

<template>
  <input
		class="u-input"
    v-bind="$attrs"
    @input="handleInput"
    @focus="handleFocus"
    @blur="handleBlur"
    @change="handleChange"
  >
</template>

これは単純なinputコンポーネントパッケージであり、v-bind=「$attrs」を使用して、コンポーネントを参照する場所のパラメータをinputコンポーネントに直接入力することができ、propsの山を定義する必要はありません.
エラーキャプチャ
一般的に,我々がエラーをキャプチャする目的は,汎用的なエラープロンプト処理やフロントエンドエラーログの収集などにほかならない.では、Vueではどうやってエラーをキャプチャしますか?
グローバルキャプチャ(GlobalCapture):errorHandLer
errorHandLer:コンポーネントのレンダリングと観察中にエラーがキャプチャされなかった処理関数を指定します.この処理関数が呼び出されると、エラー情報とVueインスタンスが取得されます.具体的な使い方:

Vue.config.errorHandler = function (err, vm, info) {
  // handle error
}

コンポーネントキャプチャ:errorCaptured
ErrorCaptured:子孫コンポーネントからのエラーがキャプチャされたときに呼び出されます.このフックには、エラー・オブジェクト、エラーが発生したコンポーネント・インスタンス、エラー・ソース情報を含む文字列の3つのパラメータが表示されます.このフックはfalseを返して、エラーが上へ伝播し続けることを阻止します.errorCapturedはフック関数であり,伝播を阻止することなく,このエラーは依然としてグローバルなerrorHandLerによって捕獲されるので,try catchに似た性質を持つインスタントエラーの処理に適している.
まとめ
ここはただ简単にいくつかの自分の开発の过程の中で出会ったことを记录して、よく知らない点、もし间违った地方があるならば、伝言を歓迎して正します~~