Vue.js：JSを他のコンポーネント用に管理するベストプラクティス

Question

Vue.jsで簡単なウェブサイトをセットアップしました。私は各ページのコンポーネントを持っています（About us、Contact us、etc.）。各コンポーネントはajax経由でページのマークアップを取得し、次に<vue-router>を使用してそれを挿入します。

これまでのところとても良いです。

私の質問は、特定のコンポーネントでのみ使用されるすべてのJSでどうすればよいですか？私のホームページには、画像スライダ、ホバーイベントなどを設定するためだけに〜100行のJSがあるかもしれません。About Usコンポーネントをロードすると、ホームページのJSはすべてブラウザに残っていますが、もはや関連性はなくなります。手動で変数を無効にする必要がありますか？

この場合はどうなるのですか：ユーザーがホームページにアクセスし、次に[情報]ページにアクセスして[ホーム]に戻ります。ホームページの2回目の訪問で、私の古い変数はすべて存在しますが、必ずしも正しい状態にはなりません。スライダーをスライド1に戻し、ホバーをリセットしたいのですが...基本的にページをリセットするだけです。

複数のコンポーネントのJSをどのようにして管理するのかについて、非常に高いレベルの概要を尋ねていると思いますが、もう一度起動しても起動しないとdocument.readyとwindow.loadコールバックで結び付けられます。ありがとう。

Answer 1

手動で変数を無効にする必要がありますか？

いいえ、これはあなたの時間/仕事/労力をうまく使いません。パフォーマンスが問題になるまで心配しないでください。

Vueがcreatedとmountedの形でdocument.readyのための類似したコールバックを持っていますが、文書は、文書ごとに...であるのに対し、これらは、コンポーネントごとにありますか？

あなたrouter-viewためkeep-aliveラッパーを使用している場合は、そのようなコンポーネントの状態をリセットするよう、作業を実行するためにactivated、deactivatedコールバックを使用する必要があります。

もしそうでなければ、ルートを離れるとコンポーネントが破壊され、何もリセットする必要はありません。

リセットに関しては、初期状態を返す関数を定義する傾向があり、状態リセットが必要なときはいつでもこの関数を使用する傾向があります。

<script> 

function initialState(){ 
    return { 
     test:'hi', 
    } 
} 

export default { 
    data(){ 
     ...initialState(), 
     hello: 'yoyo', //state that doesn't need to be reset. 
    }, 
    activated(){//user has returned to this route 
     Object.assign(this.$data, initialState()) 
    } 
} 

</script>